Dawn theme Footer Adjusts columns (mobile)

[Ludovikas]

Hi there!

I need to adjust the mobile view footer to stack the split menus in two columns. But the thing is that I have a sequence of images and also a text field placed before the menus in the footer, which I don't want to change. 

Resume, I want to leave everything as it is until getting to the menus (information and company) where I want to stack in two columns.

See the picture as it is now.  Store URL www.ludovikas.com

Thanks!

[ZestardTech · Accepted solution]

Hello there,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >base.css and paste this at the bottom of the file:

@media screen and (max-width: 767px){
.footer__content-top.page-width .footer__blocks-wrapper {
display: flex;
flex-wrap: wrap;
}
.footer__content-top.page-width .footer__blocks-wrapper .footer-block.grid__item {
width: 50%;
margin: 0;
}
.footer__content-top.page-width .footer__blocks-wrapper .footer-block.grid__item:nth-child(6) {
width: 100%;
}
}

Screenshot:-https://prnt.sc/7635RroJx19Y

[ZestardTech · Accepted solution]

Hello there,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >base.css and paste this at the bottom of the file:

@media screen and (max-width: 767px){
.footer__content-top.page-width .footer__blocks-wrapper {
display: flex;
flex-wrap: wrap;
}
.footer__content-top.page-width .footer__blocks-wrapper .footer-block.grid__item {
width: 50%;
margin: 0;
}
.footer__content-top.page-width .footer__blocks-wrapper .footer-block.grid__item:nth-child(6) {
width: 100%;
}
}

Screenshot:-https://prnt.sc/7635RroJx19Y

[Ludovikas]

@ZestardTech 

It worked just perfectly! Thanks a lot!!

[ZestardTech · Accepted solution]

Thank you for your response. It's good to know that it's worked for you.
If helpful then please Like and Accept the Solution.

[mazandar]

Same question but with Dawn 5.0, your code is unfortunately not working on that !

[mazandar]

@ZestardTech please respond

[bryan76]

big problem.  if you have a 3rd or 4th etc. footer section it renders those sections of the site to right of the rest of the page of the screen on mobile.  so if you only have 2 footer this is fine.  more than that it unusable for mobile 

[AvadaCommerce]

Hi @Ludovikas ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/section-footer.css->paste below code at the bottom of the file:

@media (max-width: 749px) {
.footer-block.footer-block--menu {
    width: 50% !important;
    display: inline-block !important;
    vertical-align: top !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[Ludovikas]

Hi there! I might need your help again. I'm editing the new Dawn theme 5.0 version but when I place the previous code you gave me (which worked perfectly on dawn 2.4) It doesn't do the same job.

It corrects the menus as I want it but the images above (within) aren't stacked as I it was on the other version of the theme.

Please kindly see images attached (as I have not published the new theme yet).

I would really appreciate I you could help me out again. Thanks a Lot!