12.0 Dawn Theme Home Page Footer and Section Help

Store Design

Topic summary

Issue: Mobile layout problems in a Shopify Dawn theme—footer has excess bottom space and needs reordering, “Our Top Brands” appears too large, and the “Nationwide reach” grid shows 1x1 on mobile instead of a multi-column layout.

Actions/suggestions:

  • CSS fixes via media queries were proposed to address footer spacing and brand sizing. One reply suggests adding rules in base.css to set .footer-article height to auto and reduce brand card width to ~48% for small screens. Another adds CSS in theme.liquid targeting the footer section to auto-height, reduce top padding, and constrain the logo width.
  • A third solution provides responsive CSS to make footer items display in two columns between 420–767px, adjust padding/margins, and keep heights auto; for <420px, padding is tightened and a centered alignment is suggested. Images were shared to illustrate the intended footer layout.

Status/outcomes:

  • Two of the three issues (footer gap/arrangement and brand sizing) are addressed with proposed CSS.
  • The “Nationwide reach” section remaining 1x1 on mobile is acknowledged as difficult; no confirmed solution yet.
  • No confirmation from the requester that changes were applied; discussion appears open.
Summarized with AI on December 23. AI used: gpt-5.
1

Hey,

I am working on my website and am happy with the desktop view but not the mobile view. https://www.supplieswarehouse.co.uk/

  1. Footer - My footer has a large empty gap on the bottom of it in mobile view. Can I get rid of this?. It is not seen on desktops. Is there also a way to rearrange it on mobile only? I would like it preferby for the explore and follow us section to be next to each other.

  2. Our Top Brands - Just looks a little too big for mobile. Can this be sized down?

  3. Nationwide reach section - on desktop it is 2 rows of 3 but on mobile its 1 by 1 meaning a longer scroll. Is there a way to make this similar to the desktop view?

Any help is appreciated.

1 Like
2

@Amy200101 please add this css to the very end of your base.css file and check, it is for brands and footer space
Shopify Admin → Online Store ->Theme → Edit code → base.css

@media screen and (maxwidth:749px){
.Quality-tools .row .col-lg-4.col-md-6.col-sm-6{width: 48%;}
.footer-article{height: auto;}
}
3

Hello @Amy200101
I have solved 2 points but it is difficult for me to solve the third one.

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px) { #shopify-section-sections--15583682789491__new_footer_bEb9Ap .footer-article { height: auto !important; } #shopify-section-sections--15583682789491__new_footer_bEb9Ap .footer-article.pt-80 { padding-top: 16px; } #shopify-section-sections--15583682789491__new_footer_bEb9Ap .header__heading-logo { height: auto !important; max-width: 89% !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
4

Hi @Amy200101

Is what you mean?

Made4uoRibe_0-1722522146722.png
Made4uoRibe_0-1722522146722.png654Ă—647 65.5 KB

If it is check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
@media only screen and (min-width: 420px) and (max-width: 767px){
section.footer-article.pt-80 .row > * {
        width: 50%;    
}
section.footer-article.pt-80 {
        padding: 20px 10px 0 10px;
    }
.footer-article {
        height: auto;
    }
ul.useful-link {
        margin: 0;
}
.map-link i {
        padding: 20px 5px 5px 5px;
}
a.map-link p.para {
        padding-bottom: 0;
        padding-top: 20px;
}
}
@media only screen and (max-width: 420px){
.footer-article {
        height: auto;
}
section.footer-article.pt-80 .row {
        padding: 20px 20px 0 20px;
}
section.footer-article.pt-80 {
        padding: 0;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like