Hello, i have tried alot of times to figure it out, browsed many topics, tried many hours but sadly to no avail, i would love to get some help regarding this, essentially what i want is to remove the gaps on the right and left of my images, specifically the 4:5 aspect ratio ones.
Here is a relevant link for my store for a product i have the updated images on, ty very much!
Hey @epickill
Before I provide the code, just wanna confirm that do you wanna make it full width on desktop or mobile? Let me know
Best,
Moeed
Use this code.
I see you’ve already edited the assets/base.css, this can go there as well.
Second part fixed your thumbs being half off-screen on desktops narrower than 1200 px.
/* full-bleed slides on mobile */
@media screen and (max-width: 749px) {
.slider.slider--mobile {
scroll-padding:0;
}
.slider.slider--mobile .slider__slide {
width:100%;
}
}
/* fix thumbs half-cut on narrow desktop */
@media (min-width:900px ){
slider-component:not(.thumbnail-slider) {
margin-left: 70px;
}
media-gallery {
position: relative;
}
slider-component.thumbnail-slider {
left: 60px !important;
}
}
From:
To:
And:
Hey, thank you very much, i have put it as the following, it seems like it worked for the 1:1 images but when i changed to 4:5 (or previously model images that are 4:5) it is still not full width, for example viewing on browser as galaxy s8+ or on my iphone 15 it has large gaps, while in iphone XR the gaps are smaller but still exist, ty very much for the response!
Attaching image.
Ah yes, theme code has a limit for the image height. It’s kinda soft limit, so that image does not grow taller than screen height minus 400px.
(This accounts for the sticky header and ideally, to fit product title and price, maybe variant selector)
To me this makes a lot of sense – it allows to see something else on the same screen without excessive scrolling.
To keep image uncropped and undistorted, theme code limits the image width.
So yes, if your screen is taller, then image will be full-bleed, but on device of wider proportions it will be limited.
The code is like below:
--viewport-offset is how much space we want to leave,
--constrained-min-height is the minimal height of the image…
Then code calculates --contained-width based on the maximum allowed height and image aspect ratio.
.product-media-container.constrain-height {
--viewport-offset: 400px;
--constrained-min-height: 300px;
--constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));
margin-right: auto;
margin-left: auto
}
.product-media-container.constrain-height.media-fit-contain {
--contained-width: calc(var(--constrained-height) * var(--aspect-ratio));
width: min(var(--contained-width),100%)
}
If you want to override this, you can make smaller the viewport offset, like this
(need to see if there are any side-effects, especially on featured product or quick-add modal, but I’d start with this)
.product-media-container.constrain-height {
--viewport-offset: 250px !important;
}
Or, if you want to make you rimages full-bleed no matter what, use code like this:
.product-media-container.constrain-height{
--contained-width: 100% !important;
}
if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
Please add this code to Custom CSS in theme settings.
@media (max-width: 749px) {
.product__media-wrapper .product-media-container { width: 100% !important; }
}
Best regards,
Dan from Ryviu: Product Reviews App
