Product picture is cut off on mobile?

Solved

Product picture is cut off on mobile?

KimGottwald
Trailblazer
235 0 34

Can someone fix this problem? My product picture is cut off at the top.

 

Bildschirmfoto 2024-06-11 um 12.17.45 PM.png

Accepted Solution (1)

Huptech-Web
Shopify Partner
1047 208 225

This is an accepted solution.

Hello! @KimGottwald Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

@media screen and (max-width: 590px) {
    .product-single__media-group-wrapper {
        margin-top: 0 !important;
    }
}

 If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Replies 4 (4)

Huptech-Web
Shopify Partner
1047 208 225

This is an accepted solution.

Hello! @KimGottwald Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

@media screen and (max-width: 590px) {
    .product-single__media-group-wrapper {
        margin-top: 0 !important;
    }
}

 If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
KimGottwald
Trailblazer
235 0 34

Worked! But only when I added it to theme.scss. Thank you 🙂

Huptech-Web
Shopify Partner
1047 208 225

Hey @KimGottwald in this ticket also https://community.shopify.com/c/shopify-design/how-to-remove-the-gap-between-header-and-product-pict... you found my help useful, consider liking this message and marking it as the solution.
Thank you 😍

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

BSSCommerce-B2B
Shopify Partner
1972 564 564

Hi @KimGottwald 

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution in a few minutes.

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