Add space between brand info and menu block of the footer

[corenhance]

Hi everyone,

I want to add some gap between the brand information and menu block of my footer and also decrease the width of the menu blocks.

Thank You

Website : https://www.corenhance.store/

[rajweb]

Hey @corenhance ,

Here's the corrected CSS for adding a gap and reducing the width of menu blocks in the footer:

Please add the following code under the assets/section-footer.css file to implement the changes:

@media screen and (min-width: 750px) {
    .footer__content-top .grid {
        row-gap: 6rem; /* Adjusts the gap between sections */
        margin-bottom: 0;
    }
    .footer__content-top .grid__item {
        max-width: 20%; /* Decreases the width of menu blocks */
    }
}

I've updated the CSS to add a gap between the brand info and menu block and reduced the width of the menu blocks for better layout. Let me know if you need further adjustments!

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

[corenhance]

Hi @rajweb, 

Thank you for your reply, but the code didn't worked.

[oscprofessional · Accepted solution]

Hi @corenhance ,

Go to Online Store > Themes > Actions > Edit Code > base.css

Add below code at the bottom of  base.css  file

@media (min-width: 768px) {
 .footer__blocks-wrapper.grid {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
 }
 .footer-block.grid__item:first-child {
    width: 80%;
 }
 .footer-block.grid__item {
    width: 100%;
 }
}

[corenhance]

Hi @oscprofessional,

Thank you so much, the code worked as I wanted and the footer now looks clean.

[topnewyork]

Hi @corenhance 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
.rte {
    margin-top: 4rem !important;
}
ul.footer-block__details-content.list-unstyled {
    margin-top: 4rem !important;
}
</style>

 If my reply is helpful, kindly click like and mark it as an accepted solution.

Use our Big Bulk Discount app to boost your sales!(https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!
Thanks!