How to realign footer view in mobile?

Store Design
, ,

Topic summary

Mobile footer needs reordering: quick links displayed side-by-side on one line, with the email/subscribe section appearing first. A screenshot is central to understanding the current layout.

Suggested approach:

  • Try reordering sections in the theme’s Footer settings (Customize > Footer) if options exist.
  • If not, add a mobile-specific CSS snippet (via a media query around 767px) that sets the quick links container to flex with wrapping/spacing, and changes the email section’s order so it appears first.

Implementation guidance:

  • Paste the CSS in Theme Settings > Custom CSS within the theme editor, then test on a mobile device.

Complication:

  • The initial guidance referenced the Modular theme, but the store uses Dawn. The exact location for adding CSS and the selector names (.footer .quick-links, .email-section) may differ in Dawn and weren’t clarified.

Status:

  • No confirmed fix yet; the poster is unsure where to paste the code for Dawn. Open/ongoing.

Outstanding needs:

  • Clear instructions for Dawn: where to add CSS (e.g., Theme Settings > Custom CSS or base.css) and the correct footer selectors for Dawn’s markup.
Summarized with AI on December 14. AI used: gpt-5.
1

My mobile view for the footer section is like this right now-

Screenshot 2024-11-15 at 1.42.29 PM.png
Screenshot 2024-11-15 at 1.42.29 PM.png750×1278 16.5 KB

I need the quick link’s to be side to side in one line and the email part to come first, can anyone help me do this please?

2

Hi @Motoblox ,

Here’s how you can achieve that in your Modular theme:

  1. Edit Footer in Theme Settings:

    • Navigate to Online Store > Themes > Customize.
    • Go to the Footer section and look for settings related to the “Quick Links” and “Email” sections. Check if you can reorder or adjust the layout there.

  2. Add Custom CSS for Mobile View: If the theme doesn’t have a built-in option for this, you can use custom CSS to tweak the layout on mobile. Here’s some CSS that could help:

/* Custom CSS to adjust footer layout */
@media only screen and (max-width: 767px) {
    .footer .quick-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .footer .quick-links a {
        margin-right: 15px; /* Adjust spacing between links */
    }

    .footer .email-section {
        order: -1; /* Moves the email section to the first position */
        margin-bottom: 15px; /* Adds spacing below the email section */
    }
}

  • To add this:

    • Go to Online Store > Themes > Customize.
    • Click on Theme Settings > Custom CSS (or find a place to insert custom code).
    • Paste the CSS code into the section and save.
    • Verify on Mobile: After saving the changes, make sure to test it on mobile. You should see the quick links displayed side by side, and the email section should come first.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt

3

Hi where should i place the custom code in?

I am using dawn theme

4

everything is discribed step by step

5

Sorry i dont get it like where should i paste the code?