Product page photo

Solved
Highlighted
Excursionist
25 0 4

I wonder how I could achieve a bigger product photo (mobile) like the first picture on my home page (notice the clean banner):

8086CA7A-E90B-47F3-8928-5D22D846DFA6.jpeg

This is my current product page photo:

2B64A8B4-3A42-4557-98EC-369ADBED0B3F.jpeg


store: www.theteststorenew.myshopify.com

password: test

<MOBILE OPTIMIZED ONLY>

Kind Regards.

0 Likes
Highlighted
Excursionist
80 19 19

Can you be a little clearer about what you're trying to achieve if possible?

They look fairly similar in terms of width.

Do you mean clean as in you don't want thumbnails of extra photos below?

Can you maybe draw over the screenshots and show us what you'd like to do?

1 Like
Highlighted
Excursionist
25 0 4

Hi thanks for your fast reply.

Maybe putting the photo a little bit higher like in the first picture would make it more clean. And the width needs to be a little bit extended because there are blank sides present.

 

this is an example;

5CD9CF0D-4760-46DF-BEF9-228BBBA296BA.jpeg

0 Likes
Highlighted
Excursionist
80 19 19

This is an accepted solution.

Hi

If you add this CSS to the bottom of your theme.scss file you should get the desired result:

@media only screen and (max-width: 798px) {
    .product-main .product__images {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    div#template-product section.has-padding-top {
        padding: 0;
    }
}

This will remove the spacing around the image on mobile more in line with the image on your homepage.

Hopefully that gets you the desired result?

1 Like
Highlighted
Excursionist
25 0 4

Thank you so much! This guy IS THE BEST. Recommended!!

0 Likes