A space to discuss online store customization, theme development, and Liquid templating.
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!
Solved! Go to the solution
This is an 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
This is an 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.
This is an 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
This is an 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.
Same question but with Dawn 5.0, your code is unfortunately not working on that !
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.
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!