Product picture is cut off on mobile?

KimGottwald · ‎06-11-2024

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

Huptech-Web · ‎06-11-2024

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

Huptech-Web · ‎06-11-2024

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 · ‎06-11-2024

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

Huptech-Web · ‎06-11-2024

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 · ‎06-11-2024

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