New Shopify Certification now available: Liquid Storefronts for Theme Developers

footer setting

Solved
essencia_necess
Excursionist
16 0 3

WhatsApp Image 2023-08-25 at 9.49.53 PM.jpeg

 

 

my footer is showing setting like this in the image when i added menu and it was distorted. how can i change the alignment of all i horizontal way without it being distorted. how can we change the code??????

 

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
4222 977 1189

This is an accepted solution.

Im sorry but I didnt ask you. What is your original alignemnt of the footer? 

I align it like this. 

Ribe_Dagandara_0-1692989863358.png

This is the code. 

.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.grid--3-col-tablet {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    width: 100% !important;
    margin-left: 0px !important;
}

.footer-block.grid__item {
    width: 100%;
}

.footer-block--newsletter {
    flex-direction: column;
    align-items: start;
}

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 4 (4)
Made4uo-Ribe
Shopify Partner
4222 977 1189

Hi @essencia_necess 

Would you mind to share your Store URL website? with password if its protected. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


essencia_necess
Excursionist
16 0 3
essencianeccesia.com
Made4uo-Ribe
Shopify Partner
4222 977 1189

This is an accepted solution.

Im sorry but I didnt ask you. What is your original alignemnt of the footer? 

I align it like this. 

Ribe_Dagandara_0-1692989863358.png

This is the code. 

.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.grid--3-col-tablet {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    width: 100% !important;
    margin-left: 0px !important;
}

.footer-block.grid__item {
    width: 100%;
}

.footer-block--newsletter {
    flex-direction: column;
    align-items: start;
}

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


essencia_necess
Excursionist
16 0 3

thank you so much I tried your method and it works well.