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

[CarCleanCC]

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:

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

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!

[namphan]

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;
    }
}

[DaisyVo · Accepted solution]

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