How can I center my mobile homepage?

Store Design
1

My entire website is working perfectly except for my mobile homepage. For some reason, the entire homepage on mobile is slightly right aligned. I’ve tried playing around with the padding and the gallery image container but I can’t seem to get it centered. Does anyone know how I can edit the existing code or add another code to center my entire homepage for mobile?

www.ThePlantPotStand.com

2

Hi There!

Looks like there’s some left padding on one of your classes that moves everything over. Try adding this to the bottom of your timber.scss file and clicking save:

.grid__item {
    padding-left: 0px;
}
1 Like
3

Hi @ScullysLLC ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->paste below code at the bottom of the file:
@media (max-widht: 551px){
   .grid__item {
     padding-left: 0 !important;
   }
}

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

Best regards.

4

That fixed it, thank you so much!! However, now the footer and the other pages appear to be left aligned.. is there a code I can add to recenter them?

5

Can you share a screenshot and a little more description of what you’d like to accomplish with the footer/other pages?

6

I was actually able to tweek the margins by adding a little bit to the code that you provided:

.grid__item { padding-left: 11px; }

.grid__item { padding-right: 25px; }

Those specific numbers worked for my page. Thank you so much for your help.