12.0 Dawn Theme Home Page Footer and Section Help

Store Design
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