How can I fix the mobile alignment issue on my ecommerce website?

Hi

I have recently launched my Shopify website https://foodies-choice.com.au/ . It looks great on Desktop but when I view it on the Phone the alignment get messed up. Below are the pictures. Theme that I have chosen is called “Supply”. Any Ideas how I can fix it. Thanks in advance :slightly_smiling_face:

Home Page

Product Page

1 Like

@Drashtea

please try this code

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

  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 600px){
.grid-item {
    padding-left: 18px !important;
}
.grid, .grid--full, .grid--rev, .grid-uniform {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: -7px !important;
}

.template-product .grid-item {
    padding-left: 31px !important;
}
}

Thanks!

Show More

Hi, I’m just needing to know the code I need to use in theme css liquid so I can change font for all product descriptions. Please help I tried getting help from 24/7 support and they couldn’t help me.

It worked! Thank you so much! :slightly_smiling_face: