Dawn theme footer column width reduce

Store Design
, , , , , , , , , , , ,
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