Dawn 15.0.0 – Make Product Page Images Full Width on Desktop and Mobile

[AceDiamond]

Hi, I’m using Dawn 15.0.0 and I want my product page images to display full width on both desktop and mobile, with no gaps between them. Right now, the images are constrained and there’s visible spacing around or between them.

Does anyone know the best way to make product images span the full width of the page while keeping the layout responsive?

Thanks in Advance

[Moeed]

Hey @AceDiamond

Can you share your store URL and Password if enabled?

Best,
Moeed

[AceDiamond]

acediamonds.com

[Moeed]

Hey @AceDiamond

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
@media screen and (min-width: 768px) {
product-info .page-width {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}
}
</style>

RESULT:

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

[namphan]

Hi @AceDiamond,

Please go to Customize > Theme settings > Custom CSS and add code:

@media screen and (min-width: 750px) {
    product-info .page-width {
        padding: 0;
    }
}
product-info .page-width {
    max-width: 100%;
}
@media screen and (max-width: 749px) {
    .product__media-list .product__media-item {
        width: 100%;
    }
}

[AceDiamond]

I’ve added the code, and it worked on desktop. However, on the mobile version, there’s still a gap at the top. Also, on the right side of the screen, part of the next image is visible. I’d like it to be full width and fully cover the screen without showing a small bit of the next image.

[Moeed]

Hey @AceDiamond

Here’s the new updated code, replace it with my current code

<style>
@media screen and (min-width: 768px) {
product-info .page-width {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}
}
@media screen and (max-width: 767px) {
.slider.slider--mobile .slider__slide {
    padding-top: 0 !important;
    width: 100% !important;
}
}
</style>

RESULT:

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

[AceDiamond]

Thanks for the code, it worked! The first image is now full width, but the following images are not. How can I make all images display full width across the screen?

[AceDiamond]

Any solutions for this?

Thank you in advance!

[Bundler-Manuel]

Hello there @AceDiamond To make the images full width on both mobile and desktop, you can try the steps in the replies here full product image width on product page (mobile dawn theme)
Let me know if they help you sort this out.

[AceDiamond]

Hi Bundler, i checked and tried it out but didn’t work?

[AiTrillion]

Hello @AceDiamond ,

I hope you are doing well!

Please copy and paste below css to the top of base.css or theme.css

.product.product–medium.product–left.product–columns.product–mobile-hide.grid.grid–1-col.grid–2-col-tablet {
width: 100vw !important;
height: auto;
display: block;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;

}

li#Slide-template–25502366695806__main-67189268414846 {

padding: 0 1.3rem;

}

This fixes the width of all the images

[AceDiamond]

@AiTrillion

.product.product–medium.product–left.product–columns.product–mobile-hide.grid.grid–1-col.grid–2-col-tablet {
width: 100vw !important;
height: auto;
display: block;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;

}

li#Slide-template–25502366695806__main-67189268414846 {

padding: 0 1.3rem;

}

Hi there,

I tried your code but didn’t work?