A user working with Shopify’s Dawn theme needs to restructure their footer layout to display brand information on the left, two menus side-by-side in the middle, and a newsletter subscription form on the right—all in a single row. The main challenge is reducing the width of the menu sections.
Proposed Solutions:
footer.liquid file to reposition blocks and applying custom CSS for styling, noting this requires coding familiarity.base.css that uses flexbox layout with justify-content: space-between and sets the newsletter block width to 40rem.Current Status:
The user tested the CSS solution and requested further adjustments to reduce the menu box width. The discussion remains open with ongoing refinement needed.
I’m using dawn theme in that I need to customize the footer section where brand information in left side, two menus near to near and subscribe to newsletter on same row. In simple I want to reduce the width of the two menu
website: https://o2cwxfekic2lnyzn-73415852291.shopifypreview.com
password : 2512
reference image
Hi,
To achieve your wish you need to go to footer.liquid section file and then find the blocks shown here and then move them to where you want. Finally you can use css to style it to look clean with layout standard.
You need familiar with code to handle this, if you don’t, so i can help you implement.
Please add this code at the bottom of your base.css file.
@media (min-width: 750px) {
.footer__content-top {
display: flex !important;
justify-content: space-between;
}
.footer__content-top .footer__blocks-wrapper {
width: 100%;
}
.footer__content-top .footer-block--newsletter {
width: 40rem;
align-items: flex-start;
margin-top: 0;
}
.footer__content-top .footer-block--newsletter h2 { text-align: left; }
}
@Dan-From-Ryviu Thanks for the code , but if possible can we reduce the width of menu box
