reduce gap between headings and menus in footer

Store Design
, , ,

Topic summary

A user seeks to reduce excessive spacing between footer headings (like “INFORMATION”, “CUSTOMER SUPPORT”) and their corresponding menu links on their Dawn theme Shopify store.

Proposed Solutions:

Multiple respondents suggest adding custom CSS to adjust the spacing:

  • Primary approach: Add CSS to Assets/base.css or Assets/section-footer.css targeting .footer-block__heading with margin-bottom values between 0.25rem and 1rem
  • Additional fix: Remove top margin from .footer-block__details-content by setting margin-top: 0
  • Alternative method: Insert CSS directly into theme.liquid file before the </head> tag

Key CSS properties to adjust:

  • .footer-block__heading { margin-bottom: 0.5rem; } (adjustable to preference)
  • .footer-block__details-content { margin-top: 0; }
  • Optional: .footer-block { margin-bottom: 1rem; } for overall block spacing

The discussion remains open with no confirmation from the original poster on which solution worked. All solutions follow similar approaches with minor variations in recommended margin values and file locations.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

hello, i want to reduce the gap between my footer headings and menus, as there is currently a big gap:

Screenshot 2025-06-17 at 13.49.02.png
Screenshot 2025-06-17 at 13.49.02.png505Ă—754 24.6 KB

my website is www.antico-abito.com , theme is dawn

1 Like
2

Hello @ads18922

To reduce the gap between footer section headings (like “INFORMATION”, “CUSTOMER SUPPORT”) and their menu links in the Dawn theme, you’ll want to adjust the spacing in the footer section via CSS.

Here’s how to do it:

Steps to Reduce Footer Gap in Dawn Theme

  1. From your Shopify Admin, go to
    Online Store > Themes > next to Dawn, click … > Edit code.

  2. In the Code Editor, open:
    Assets/base.css

  3. Scroll to the bottom and add this CSS code:

/* Reduce spacing between footer headings and links */
.footer-block__heading {
  margin-bottom: 0.5rem; /* Reduce as needed */
}

.footer-block__details-content {
  margin-top: 0; /* Remove extra top margin from menu */
}

You can fine-tune 0.5rem to 0.3rem or 0.25rem if you want them even closer.

Optional Enhancements
If your theme version of Dawn has padding or margin applied elsewhere in the .footer section, you might also want to inspect and tweak:

.footer-block {
  margin-bottom: 1rem; /* Reduce if there's too much space between blocks */
}

let me know if it work

Thank you :blush:

3

Hello ads18922,

  1. Go to Online Store → Theme → Edit code.
  2. Open your assets → section-footer.css file and paste the code below.

.footer-block__heading {margin-bottom: 0.7rem;}

4

Hi,

add this css

.footer-block__heading {
    margin-bottom: 1rem !important;
}

Thanks!

5

Hi @ads18922

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

websensepro_0-1750165912863.png
websensepro_0-1750165912863.png1347Ă—476 25.6 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!