How can I decrease the space between my footer menus?

Store Design

Topic summary

A user seeks to reduce spacing between footer menus in their Dawn theme (v6.0.2) store, providing before/after images showing desired tighter column spacing.

Two CSS solutions offered:

  1. First approach: Add CSS to base.css file targeting .footer__content-top .grid with row-gap: 6rem and margin adjustments for newsletter blocks (6% right margin, 5% left margin, 60% width).

  2. Second approach: Insert CSS in theme.liquid before </body> tag, using media query for screens min-width 750px to set footer grid wrapper width to 75%.

Both solutions use !important flags and media queries to control desktop layout. The discussion remains open with no confirmation of which solution worked or if the issue was resolved.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

hi, i want to reduce the spacing between my footer menus. i want to change it from image 1 to image 2. dawn theme - 6.0.2

URL: nightlightcity.com

pass: bowchu

image 1:

ni3_0-1672311814344.png
ni3_0-1672311814344.png1668×588 23.1 KB

image 2:

ni3_1-1672311855894.png
ni3_1-1672311855894.png895×352 7.25 KB

2

@ni3 Put below css into base.css file end of the file (Online store ->themes->assets->base.css)

@media screen and (min-width: 750px)
.footer__content-top .grid {
    row-gap: 6rem;
    margin-bottom: 0;
    width: 60% !important;
    margin-left: 5% !important;
}
.footer-block--newsletter {
    margin-right: 6% !important;
}
}

Ujjaval_0-1672313491649.png
Ujjaval_0-1672313491649.png1440×753 14.9 KB

3

Hello @ni3

I would like to give you a solution to support you:

  1. Go to Online Store-> Theme-> Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before :
<style>
@media only screen and (min-width: 750px){
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
width: 75% !important;
}}
</style>

Was my reply helpful? Please Like and Accept Solution. This mean alot to me