Dawn theme footer column width reduce

Store Design
, , , , , , , , , , , ,

Topic summary

A user seeks to reduce the footer column widths in Shopify’s Dawn theme and align the newsletter signup in the same row as other footer elements.

Current Issue:

  • Footer columns are too wide
  • Newsletter section appears separately instead of inline with other footer content

Proposed Solutions:

Two community members provided CSS-based fixes, both requiring edits to base.css via the theme code editor:

Solution 1: Uses flexbox with percentage-based widths

  • Sets footer blocks to 20% width each
  • Allocates 30% width to newsletter section
  • Applies flex-wrap for responsive behavior

Solution 2: Uses media query for desktop screens (991px+)

  • Allocates 75% width to footer blocks wrapper
  • Reserves 25% for newsletter block
  • Uses display: flex on parent container to align items horizontally

Both approaches modify the Dawn theme’s default footer layout through custom CSS. The discussion remains open with no confirmation of which solution was implemented.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

I want to reduce the width of dawn theme footer column width and make the newsletter in same row

website: https://dcd3ls51spg6l4nc-73415852291.shopifypreview.com

password: 2512

image.png
image.png1112×349 34.5 KB

Thanks in advance

2

hi @Sivadarshan

To reduce the footer column width in the Dawn theme and place the newsletter in the same row, you can adjust the CSS:

  • Go to: Online Store > Themes > Edit Code
  • Open: base.css (or theme.css)
  • Add this CSS at the bottom:
.footer__blocks {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer__block {
    flex: 1 1 20%; /* Adjust width as needed */
}

.footer__newsletter {
    flex: 1 1 30%; /* Adjust width to align in the same row */
}

This should help reduce column width and align the newsletter

3

Hello @Sivadarshan

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the theme you want to edit and then click Actions > Edit code.

  • Search base.css

  • Insert the provided CSS code at the end of the file and save the changes.

@media screen and (min-width: 991px)
{
.footer .footer__blocks-wrapper
{
    width: 75%;
}
.footer .footer-block--newsletter
{
    width: 25%;
    margin-top: 0;
}
.footer .footer__content-top
{
    display: flex;
    align-items: flex-start;
}
}

Please hit Like and Mark it as a Solution if you find our reply helpful.

1 Like