Product picture is cut off on mobile?

[KimGottwald]

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

[Huptech-Web]

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.

[BSSCommerce-B2B]

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.

[KimGottwald]

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

[Huptech-Web]

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