How to add padding to my footer menu list

[ju0]

Hi,

I need assistance aligning the footer menu so that it matches the horizontal alignment of the icon feature section located directly above it. Currently, the footer menu appears to extend too far to the left and right compared to the centered content in the icon section, as shown in the attached screenshot. I'd like both sections to share the same max-width and be visually consistent within the page layout. Can you help me adjust the layout or CSS to achieve this alignment?

Thank you.

[Moeed]

Hey @ju0 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.footer__block-list {
    justify-content: space-around !important;
}
}
</style>

RESULT

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[ju0]

I appreciate for your quick reply! 

I can see that it was moved towards inside which is much better but the left HELP & INFO menu isn't still quite aligned...Is there a way to align it with the icon section or does it move depending on the screen ratio? 
One mobile, is there a way to show them in two rows instead of a long line? 

Thank you in advance.

[DaisyVo]

Hi @ju0  

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file theme.css and add this code at the end of the file

@media (max-width: 768px) {
.footer__block-list {
    display: flex !important;
    justify-content: center !important;
}

ul.social-media.social-media--list.unstyled-list {
    justify-content: center;
}
}

Result

Best,

DaisyVo

[ju0]

Thank you for your help, but I don't see any change after adding the code...

The menu still shows in one line on mobile.