12.0 Dawn Theme Home Page Footer and Section Help

[Amy200101]

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. 

[suyash1]

@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;}
}

[niraj_patel · Accepted solution]

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 </body> on theme.liquid
<style>
@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;
  }
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Made4uo-Ribe]

Hi @Amy200101 

Is what you mean?

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;
}
}

• And Save. 
• Note: I limit this one on the smaller screen. So it will be still user firendly. 
• 

  On the more smaller screen I suggest to align them on center. 

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