Left Justfifcation and Center Footer Menu

[WK100]

Hey There! I am currently using this code to center my footer menu in my ‘section.footer.css’ section:

@media screen and (max-width:768px){

.footer-block__details-content{
text-align: center;
}

.footer-block__details-content .list-menu__item{
display: inline-block;
}
}

This is working great for centering the footer menu on mobile. However, on desktop I want the footer menu to be left justified but centered. See below for where I want it:

Anyone know how to get it to be like that?

Link: https://w95ulby72nwdogan-81877893427.shopifypreview.com

[Dan-From-Ryviu]

Hi @WK100

Please use this code to do that

@media screen and (min-width: 750px) {
.footer-block {
    display: flex !important;
    align-items: center !important;
}
}

[PageFly-Oliver]

Hi @WK100 ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

[WK100]

@Dan-From-Ryviu Thanks! I actually want to change it now. How do I make it so that it is centered like so:

[oscprofessional]

Hello @WK100

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.footer-block__details-content {
    margin: 0 auto;
}

[topnewyork]

Hi @WK100

Follow these Steps:
Go to Online Store Edit Code Find theme.liquid file or base.css
Add the following code in the bottom of the file above tag

.footer-block__details-content {
    margin: 0 auto;
}

RESULT:

[WK100]

@topnewyork This worked for the desktop view but it did not work for the mobile view. How do I fix the mobile view to be centered as well?

[WK100]

@oscprofessional This worked for the desktop view but it did not work for the mobile view. How do I fix the mobile view to be centered as well?

[topnewyork]

@WK100 Paste this code.

Follow these Steps:
Go to Online Store Edit Code Find theme.liquid file or base.css
Add the following code in the bottom of the file above tag

ul.footer-block__details-content li a{
    display: flex;
    justify-content: center;
}

If I managed to help you then, don’t forget to Like it and Mark it as Solutions.

[oscprofessional]

Hello @WK100

Please provide your store URL so I can review it and provide a solution.

[Dan-From-Ryviu]

Please give me preview link again