ISSUE STILL ONGOING: Mobile Footer Menu Dawn

Store Design
, , , , , , ,

Topic summary

Mobile footer menu layout on Shopify’s Dawn theme, aiming for three menus in one row (three columns) on mobile.

Initial attempts used multiple CSS media queries and width tweaks but did not achieve stable alignment.

Key fix (accepted): add CSS in base.css for max-width: 767px, setting .footer-block.grid__item to 30% width, switching .footer .grid to display:flex with align-items: baseline, and reducing footer padding. This produced the desired three-column mobile layout for the original poster.

Follow-up issue: another user adopting the fix reports uneven vertical alignment between the image and introduction on the second line, likely due to differing content heights within flex items.

Suggestions given: review store display settings and width adjustments; share the store URL for targeted troubleshooting.

Status:

  • Original poster’s issue resolved (solution accepted).
  • Secondary alignment issue remains open pending further details.

Notes:

  • CSS (Cascading Style Sheets) edits and media queries (rules applied at specific screen widths) are central to understanding the solution.
  • Code snippets are essential to the fix; no images/videos were required.
Summarized with AI on December 18. AI used: gpt-5.
1

Hi all,

I wanted to make my footer menu on mobile having all 3 menu in one row and 3 columns.

I search different solutions and I found this:

add following css your assets/base.css bottom of the file

@media screen and (min-width: 750px){
.grid--4-col-tablet .grid__item {width: calc(25% - 1rem * 3/ 4) !important;}
}

I also try this:

@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%;
}
}

and i am playing with this to find something suitable adjusting width values:

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

I’ve done it, but nothing has changed or stay aligned.

My store URL is https://theheelsluxxx.com/

thanks for your help

2

@heelsluxxx add in base.css

@media screen and (max-width: 767px){
    .footer-block.grid__item {
       
        width: 30% !important;
    }
    .footer .grid {
        display: flex !important;
        align-items: baseline !important;
    }
.footer__content-top.page-width {
    padding: 0 15px !important;
}
}
1 Like
3

it worded!

I accept this as solution!

Many thanks

1 Like
4

I had the same problem and solved it according to your method, but I had a new problem because of it, I adjusted the width scale based on yours, but the second line of the image and the introduction can’t keep the same horizontal height

5

I had the same problem and solved it according to your method, but I had a new problem because of it, I adjusted the width scale based on yours, but the second line of the image and the introduction can’t keep the same horizontal height.

6

maybe because of your store displayed settings.. did you adjust the width?

7

please share store url @OakFamily

8

I sorted this issue.

thus, I don’t need to share my store.