[MOTION THEME] Footer Logo&Social column max width: 95%

Store Design
,
1

Hi, i’ve done some modifies to the css sush as:

//align menu voices

.collapsible-content {
text-align: center;
}

//align menu titles
.footer__title {
text-align: center;
}

//align footer logo and social icons
.footer__logo,
.footer__social {
display: flex;
justify-content: center;
align-items: center;
}

Unfurtunately the logo & social column max settable width is 95%, so it doesn’t appear fully centered, because by default the column has margin:0 from the left, leaving empty space (5%) in the right, can i set column full width or directly center the column itself to make it appear fully centered?

1 Like
2

Hey @userwithoutname

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

3

Unfourtunately i can’t because the website is already published but with a different theme, im modifing an unpublished version, but i can send a screenshot

immagine_2023-11-13_145214257.png
immagine_2023-11-13_145214257.png1192×527 23.9 KB

4

Hey @userwithoutname

I need to have a look on the website coding to provide you the solution so if you can’t share the password publicly then you can share it privately if you feel like it.

Best Regards,

Moeed

5

Hi @userwithoutname

Would you mind to share your Store URL website? with password if its unpublish. You can pm us. Thanks!

6

https://8paznkpcdq41n8ss-61181493400.shopifypreview.com

Currently ive apparently solved adding an attribute width: 105% to:

.footer__logo,
.footer__social {

width: 105%;
display: flex;
justify-content: center;
align-items: center;
}

but i dont know if its the best solution..

1 Like
7

Hi @userwithoutname

I have another solution, you can check it.

In the grid in the footer there is 30px padding-left since the logo is need a bit left. I take out the padding from the left and transfer it right.

Made4uoRibe_0-1699892436540.png
Made4uoRibe_0-1699892436540.png1844×630 107 KB

My code here.

@media only screen and (min-width: 769px){
.footer__item--footer-0 {
    width: 100%;
    padding-left: 0px;
    padding-right: 30px;
}
}

And Save.

In my opinion, its better to play with margin and padding when you need to increase/decrease the spaces.

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

8

Yes you’re is better. Thank you for the help provided!