Mobile Layout not centered

[sixdreamz]

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

[comercioservice]

@sixdreamz 

 i Hope you are well

Please go to

1) Online store

2) Themes -> Edit theme

3) Layout

4) base.css and paste this code on the end

@media screen and (max-width: 749px) {
    .product-media-container.media-fit-cover .media {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }
    
    .product__media.media.media--transparent img {
        margin: 0 auto;
        display: table;
        clear: both;
        position: relative;
        top: 0;
        left: 0;
        bottom: 0;
        margin: 0 auto;
    }
}

result

I hope it works for you, let me know, and If you'd like to discuss this more about this, don't hesitate to send me a PM/DM

[sixdreamz]

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

[BSSCommerce-B2B · Accepted solution]

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:

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: 

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! 

[Dan-From-Ryviu]

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;
    }
}