Solved

Product picture is cut off on mobile?

KimGottwald
Pathfinder
137 0 20

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)

Rishihuptech
Shopify Partner
593 105 119

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)

Rishihuptech
Shopify Partner
593 105 119

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
Pathfinder
137 0 20

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

Rishihuptech
Shopify Partner
593 105 119

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 Expert
360 60 71

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development