Make footer 1 row instead of 2

Store Design

Topic summary

A user running the Dawn theme wants to redesign their footer from a 2-row layout to a single-row layout on desktop. They provided mockup images showing the desired change.

Initial Solution:

  • A CSS solution was provided to convert the footer to a single row using flexbox, with content split 50/50 between top and bottom sections.

Mobile Issue:

  • The desktop fix worked but broke the mobile layout.
  • The user requested left-aligned, stacked items on mobile (similar to another reference site).

Final Resolution:

  • Two contributors provided media query CSS code to fix the mobile view.
  • The solution uses @media queries to revert the footer to a column layout on smaller screens (max-width: 749px/1025px).
  • Mobile footer now displays items stacked vertically with left alignment.
  • The user confirmed the solution works successfully.

Additional Note:

  • An unrelated CSS snippet for product media modals was shared at the end, though its connection to the footer issue is unclear.
Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I would like to make my footer 1 row instead of 2 but can’t figure out a way to combine them or align them. How can I make this possible? Thanks! Attached is my current site and a mockup of how I would like my footer to look. I’m on the Dawn theme

current footer.jpg
current footer.jpg1310×191 6.09 KB

new footer.png

2 Likes
2

Hi @ameye27

If you share your store link and password if its a password protected than we can help

3

Hi @Mehran_Ali thank you! It’s https://www.senitejewelry.com/

4

Hi @ameye27

In your theme → code-editor → find base.css in search
Past that CSS Code

footer { display: flex; align-items: center; flex-direction: row-reverse; }
.footer .footer__content-top { padding: 0; width: 50%; }
.footer .footer__content-top .footer-block {width: 100%;max-width: 100%;padding: 0 5rem;}
.footer .footer__content-top .footer-block ul { text-align: right; }
.footer .footer__content-bottom { padding: 0; width: 50%; border: 0; }
.footer .footer__content-bottom .footer__content-bottom-wrapper { justify-content: flex-start; }

If this Answer work kindly Like and Mark This As Solution

If you need expert consultation regarding store and design feel free to contact

1 Like
5

Hi @Mehran_Ali really appreciate your help! Your solution did help but it’s still looking wrong. Desktop looks good but mobile looks really off. For mobile, can the footer be left-aligned with each item being it’s own row? Like this site’s mobile footer https://wardrobe.nyc/pages/about

6

Hi @ameye27

To fix the mobile screen. Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
footer.footer {
    display: flex;
    flex-direction: column;
}

footer.footer .footer__content-top.page-width, .footer__content-bottom {
    width: 100% !important;
}

.footer__content-bottom-wrapper.page-width {
    padding: 0 5rem;
}
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
7

HI @ameye27

Sorry for this kindly add this code as well it will help for mobile view

@media(max-width:1025px){
    footer { display: block; }
    .footer .footer__content-top { width: 100%; }
    .footer .footer__content-top .footer-block {max-width: 100%;}
    .footer .footer__content-top .footer-block ul { text-align: left; padding-bottom: 14px; }
    .footer .footer__content-top .footer-block ul li { display: block; }
    .footer .footer__content-bottom { border-top: solid .1rem rgba(var(--color-foreground),.08); width: 100%; }
}

@media(max-width:768px){
    .footer .footer__content-top .footer-block { padding: 0px 15px; }
    .footer .footer__content-top .footer-block ul {margin: 0;padding: 0;}   
}
1 Like
8

@Made4uo-Ribe that works! Thank you so so much

9

Hi @ameye27

Check this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.product-media-modal__content {
    max-height: unset !important;
    width: 100%;
    overflow: hidden !important;
}
  • And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!