How to center footer elements on desktop and mobile

Store Design
1

Hey,

I was hoping someone would be able to help me code elements in my footer so they show up centered on both desktop and mobile. it looks a bit disorganized right now in my opionion with everything left. My store is ElevationAthleticsYYC.ca and I am using the prestige theme.

Thanks for your help in advance!

2

Hi @Claud123 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
.Footer__Inner {
    text-align: center;
}

.Footer__Inner .Footer__Block .Linklist__Item {
    text-align: center;
}
.Footer__Inner .Footer__Block .Form__Submit {
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 1140px) {
    .Footer__Inner .Footer__Block {
        width: 25%;
        flex-basis: 25% !important;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
3

Thank you for your reply! I’m sorry I was not clear enough. is there any way i could center the items but have them all the words left margin? I attached a photo to show you what i mean.

Thanks in advance

Screen Shot 2022-04-11 at 4.01.56 PM.png
Screen Shot 2022-04-11 at 4.01.56 PM.png3456×444 79 KB

4

can it be done? I appreciate the help!

5

Hi @Claud123 ,

You can replace previous code by below code:

@media (min-width: 1140px) {
    .Footer__Inner .Footer__Block {
        width: 25%;
        flex-basis: 25% !important;
    }
}

Hope it can help you

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

6

Hello,

The code didn’t change anything on the site when i plugged it in. is it maybe missing something?

Thanks

7

Can anyone help??