Product image size

[Langvop]

So conveniently I have both an android and iPhone. This allows me to see how my website looks on both types of devices and I’ve noticed a slight difference in product image width on the single product page.

On the iPhone it is smaller and on android it is bigger. I prefer it bigger because it looks more professional, or even better, fully touching the edges. Does anyone know how I can make the product image width fully touch the sides on both types of phones? I’ll attach two photos of the iPhone and Android layout and one image of how I would like it to look, the one that is fully covering the edges. I want it to look the same on all devices. Much appreciated!

[PaulNewton]

Hi @Langvop Always keep others in mind we are NOT mind readers
Provide actual details , like publicly inspectable URLS, theme names, etc
This is NOT about technical ability, you have the info in front of you but withhold when seeking aid.
Vague communication is EXPENSIVE it will burn your time and money it’s how many small businesses die.

And search first per the guidelines to respect your time and others time
e.g. https://community.shopify.com/search?q=full+width+product+images+iphone optionally include the specific theme name or name of theme it’s based on like horizon themes

[The_ScriptFlow]

Hey,

In order to make the product media full width you need to follow these steps.

Go to Shopify Admin >> Online Store >> Edit Code >> base.css

In the end of base.css file paste the following code that shared below.

@media only screen and (max-width: 767px) {

.product-media-container.constrain-height.media-fit-contain {

    --contained-width: 100%;

     width: 100%;
}

}

Once you paste this code then you will see the product media in full width.

Let me know if this might helpful.

[Dan-From-Ryviu]

You can try to add this code to Custom CSS in theme settings and check again.

@media (max-width: 749px) {
   .grid--peek.slider .grid__item:first-of-type { margin-left: 0 !important; }
   body .product__media-list .product__media-item {
        width: calc(100% + 3rem);
    }
   .slider.slider--mobile {
        scroll-padding-left: 0;
        max-width: calc(100% + 3rem);
        gap: 0;
    }
}

Best regards,
Dan from Ryviu: Product Reviews App

[Langvop]

Hi, I tried it, but it cuts off a bit of the picture. So close! Appreciate your support. Also the theme is dawn, I was told not to leave that info out.

[Langvop]

It didn’t seem to work, appreciate your help though! It seems to work on the picture you uploaded so I’m not sure what I could have done wrong

[Dan-From-Ryviu]

Please add the code, click Save, and then provide me with your store URL so I can review it.

[Parampreet]

Hi @Langvop
You can add this code in your css file for make thumbnail image full width.

@media screen and (max-width: 749px) {
.product__media-list .product__media-item {
width: 100% !important;
}
.slider.slider–mobile .slider__slide {
margin: 0 !important;
}
.product-media-container.constrain-height.media-fit-contain {
width: 100% !important;
}
}

[Parampreet]

If above code is not working, please use this code.

@media (max-width: 749px) {
.grid–peek.slider .grid__item:first-of-type { margin-left: 0 !important; }
body .product__media-list .product__media-item {
width: calc(100% + 3rem);
}
.slider.slider–mobile {
scroll-padding-left: 0;
max-width: calc(100% + 3rem);
gap: 0;
}
.product-media-container.constrain-height.media-fit-contain {
width: 100% !important;
}
}

[Langvop]

done. www.earthworld.store

[Dan-From-Ryviu]

@Langvop

www.earthworld.store

Please add more of this code.

.product-media-container { width: 100% !important; }

[Langvop]

Thank you! it looks great on android, but part of the image is cut off on iphone! do you know how to make it fully show vertically like on the other device? I would like to give a tip after this for this amazing help!

[tim_1]

You may go to Product Info section settings and paste this into “Custom CSS”:

.product__media {
    --constrained-height: var(--ratio-percent);
}

It will make your product images higher on shorter screens, but also will push some product info below fold.

[Langvop]

thank you so much!!! You’re right, some of the info got pushed below, I guess something had to give, but I think it’s worth it for the bigger image!

[Langvop]

Thank you for this Paul. This was my first ever post so was a bit naive. A question please, can I mark multiple shopify partner responses as solutions?

[Moeed]

Hey @Langvop

Just here to answer your question that no you can not mark multiple responses as answer. What you can do is mark the answer as solution which was more helpful. Glad to hear you got your problem sorted out.

Cheers,
Moeed