Solved

Dawn theme Footer Adjusts columns (mobile)

Ludovikas
Tourist
12 0 4

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 URLCaptura de Tela 2022-03-22 às 13.49.37.png www.ludovikas.com

 

Thanks!

Accepted Solutions (2)

ZestardTech
Shopify Expert
5601 1019 1345

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

ZestardTech
Shopify Expert
5601 1019 1345

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.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 8 (8)

ZestardTech
Shopify Expert
5601 1019 1345

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Ludovikas
Tourist
12 0 4

@ZestardTech 

 

It worked just perfectly! Thanks a lot!!

ZestardTech
Shopify Expert
5601 1019 1345

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.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
mazandar
Shopify Partner
16 0 4

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

mazandar
Shopify Partner
16 0 4

@ZestardTech please respond

bryan76
Trailblazer
220 4 46

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
Shopify Partner
3879 839 968

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.

banned
Ludovikas
Tourist
12 0 4

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!