Footer text font size smaller and mobile footer smaller (dawn theme)

Store Design
,
1

Hello,

I would like to make my footer more compact.

Currently, I’m using the Dawn theme on my website, carcleansweden.se, and I’m struggling to achieve this specific layout.

This is my current footer:

CarCleanCC_1-1731081189997.png
CarCleanCC_1-1731081189997.png488×1167 38.6 KB

My goals are to make my footer more similar to the example shown in the image.

CarCleanCC_0-1731081109358.png
CarCleanCC_0-1731081109358.png485×625 22.3 KB

Could you please guide me on how to achieve this? Specifically, any CSS code or theme adjustments that would help me replicate this style in the Dawn theme would be appreciated.

Thank you in advance!

2

Hi @CarCleanCC ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
    .footer__blocks-wrapper.grid {
        display: flex !important;
    }
    .footer__blocks-wrapper.grid .footer-block.grid__item {
        width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
        margin-top: 0;
    }
}
3

Hi @CarCleanCC

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
.footer__content-top > .footer__blocks-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
}
.footer__content-top > .footer__blocks-wrapper > div {
    margin: 0 !important;
}
}

Here is the result: https://prnt.sc/qTkS2ZQ4QzxU

I hope this helps

Best,

Daisy

1 Like