Mobile Layout not centered

Store Design
, , , , , , , , , , , , , ,
1

Hey,

so quick and easy.

my mobile layout on my product page isnt centered. when u click on a product, the picture and the gif (for the shirts with print) arent centered either. could you please help me?

url: sixdreamz.com

2

hey, sadly it didnt work. do you know any other solution?

3

HI @sixdreamz ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_0-1727200951541.png
BSSCommerceB2B_0-1727200951541.png400×195 26.3 KB

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

@media screen and (max-width: 749px) {
    .product-media-container.media-fit-cover .media {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        margin-left: 15px !important;
    }
   .product__media.media.media--transparent img {
        height: 335px !important;
        position: relative !important;
    }
}

Step 3: Save and reload home page.

=>> The result:

BSSCommerceB2B_2-1727201046544.png
BSSCommerceB2B_2-1727201046544.png547×916 48.1 KB

BSSCommerceB2B_3-1727201050468.png
BSSCommerceB2B_3-1727201050468.png545×929 55.5 KB

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

4

Hi @sixdreamz

You can solve it by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings

@media (max-width: 749px) {
    .product .product-media-container.media-fit-cover .media {
        margin-left: 0 !important;
    }
}