Dawn theme Footer Adjusts columns (mobile)

Retired Boards Appdev Store Design

Topic summary

Goal: On mobile, make the footer’s split menu blocks (“Information” and “Company”) display in two columns, without altering the images and text that appear above them.

Initial solution (Dawn 2.4): Add CSS via Online Store > Themes > Edit code.

  • In assets/base.css: use a max-width media query to set the footer blocks to 50% width, flex wrapping, with one specific block at 100%.
  • Alternative: In assets/section-footer.css, target .footer-block–menu to 50% width with inline-block.
    Outcome: The first approach successfully stacked the menus in two columns on mobile for Dawn 2.4.

Recent update (Dawn 5.0): The previous CSS no longer fully works.

  • Menus stack as intended, but the images above are not stacking as before.
  • Multiple users report the code is ineffective on 5.0 and seek updated guidance.

Additional issue: With 3 or more footer sections, mobile renders extra sections off-screen to the right; only two sections behave correctly.

Assets: Screenshots and image attachments are referenced; a store URL is provided.

Status: No confirmed fix for Dawn 5.0 yet; requests for an updated solution remain unanswered.

Summarized with AI on January 11. AI used: gpt-5.
1

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

Captura de Tela 2022-03-22 às 13.49.37.png
Captura de Tela 2022-03-22 às 13.49.37.png704×1432 45.7 KB

www.ludovikas.com

Thanks!

1 Like
2

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:-Screenshot by Lightshot

3

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.

4

@ZestardTech

It worked just perfectly! Thanks a lot!!

1 Like
5

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.

1 Like
6

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!

7

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

8

@ZestardTech please respond

9

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