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

[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!