How can I modify footer column widths on Dawn theme?

Store Design
, , ,
1

Hello - I’d appreciate any help, I’ve tried doing this a couple ways and nothing works. The footer blocks don’t have their own custom css option in the customizer, so I tried adding code to the elements in my section-footer.css, but nothing is working.

I’d like to have 3 columns of different widths:

  • First column: is fine, but too wide currently, I only need it 200px wide
  • Second column: I’d like wider, plus the text left aligned and vertically aligned with the image (I’d also like to change the font)
  • Third column: can be 200px, like the first column, but I’d like to drop the social icons/brand info to the bottom of the column vertically

I tried overwriting the elements, and then modifying the elements themselves in the theme code - but I must be doing something wrong because every time I refresh no changes have been made to the elements.

Thanks!

Erica

Screenshot 2024-02-27 at 2.54.09 PM.png
Screenshot 2024-02-27 at 2.54.09 PM.png1632×491 70.8 KB

1 Like
2

Hi @wickedbride

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

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 (min-width: 749px){
#shopify-section-sections--16165657575612__footer p {
    text-align: left;
}

.footer-block__details-content.footer-block-image {
    justify-content: center;
}

.footer-block__brand-info {
    align-self: self-end;
}

.footer-block.grid__item.scroll-trigger.animate--slide-in {
    display: flex;
    justify-content: center;
}
}

And Save.

Result:

Made4uoRibe_0-1709069006891.png
Made4uoRibe_0-1709069006891.png1414×449 45.6 KB

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

1 Like
3

Ah, it’s so close, thank you! But the styling still isn’t working on the p tag - it’s still centered in the middle, instead of aligning left. I tried swapping the div to footer-block__details-content, but that won’t work either. I tried swapping # with . and other fixes but no matter what I do, I can’t get that block in the middle to change - I even tried changing it a different color so I could see the block but that wouldn’t even take. Any other advice you have is appreciated, thanks!

4

Yeah, because that code is in the theme.liqud. try to add !important.

@media only screen and (min-width: 749px){
#shopify-section-sections--16165657575612__footer p {
    text-align: left !important;
}

.footer-block__details-content.footer-block-image {
    justify-content: center;
}

.footer-block__brand-info {
    align-self: self-end;
}

.footer-block.grid__item.scroll-trigger.animate--slide-in {
    display: flex;
    justify-content: center;
}
}

If still didnt work, find the code in the theme.liquid or in the footer.liquid under section folder.

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

1 Like
5

Still doesn’t work - I’ll hunt for the code in the liquid files - thanks! Worst case, I make it into an image, which I know is terrible for SEO but I can do a different work around. Thanks!