Re: Mobile Layout not centered

Solved

Mobile Layout not centered

sixdreamz
Explorer
110 0 37

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

Accepted Solution (1)

BSSCommerce-B2B
Shopify Partner
1952 560 561

This is an 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:

BSSCommerceB2B_0-1727200951541.png

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_3-1727201050468.png

 

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! 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

View solution in original post

Replies 4 (4)

comercioservice
Shopify Partner
244 35 27

@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

gutenplayer_0-1727198344565.png

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
Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
Need store customizations, bug fixing or development ? Contact with us -- Support form for quick quote!
BFCM Big Deals: Big savings 25% off -on our Shopify FAQs apps!
sixdreamz
Explorer
110 0 37

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

 

BSSCommerce-B2B
Shopify Partner
1952 560 561

This is an 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:

BSSCommerceB2B_0-1727200951541.png

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_3-1727201050468.png

 

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! 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Dan-From-Ryviu
Shopify Partner
10028 1997 2042

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

 

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.