How can I make a product page image full width on mobile?

Store Design
1

IMG_2863.png
IMG_2863.png1179×2556 156 KB

IMG_2864.png
IMG_2864.png1179×2556 150 KB

Hello community!

I am currently building my product page, and I’m trying to make the main product image have no padding/ be full width on mobile only.

Look at the images below for a visual presentation of what I’m looking to do.

Is this possible to achieve? Like how it is on the represent web page

2

Hello @Ceebee1

This is Amelia at PageFly - Shopify Advanced Page Builder app.

Could you please share the URL link of your store so we can check it for you?

1 Like
3

Ceebeeldn.com

4

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css or theme.css

Step 3: Add code

@media (max-width: 768px) {
.product__media {
 margin: 0 -15px;
}
}

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

5

Hi it didn’t work

6

H @Ceebee1

Please use the following CSS snippet

@media screen and (max-width: 750px) {
    .product__media.media media--transparent {
        width: calc(100% + 34px) !important;
        margin-left: -16px !important;
    }
}

Result

BSSCommerceB2B_0-1717901722791.png
BSSCommerceB2B_0-1717901722791.png429×695 56.9 KB

If it helps you, please like and mark it as the solution

Best regards.

1 Like
7

Hi we’re do I place this code?