Full Width Porduct Pictures DAWN 15.1

Store Design
, , , , ,
1

Hi to everyone,

i need help to make the product pictures full width on their product pages (on mobile). The result i would like to get is the product picture without the white borders/spaces on the sides of it.
I tried different solutions but they didn’t work. I would like also the dotter slider as overlay on the pictures.

Your help would be so appreciated.

I’m using DAWN Theme 15.1

my url: glemoe.com

Thank you in advance!

2 Likes
2

Hi @Leobassi

check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media screen and (max-width: 749px) {
    .grid--peek.slider .grid__item:first-of-type {
        margin-left: .5rem;
    }
.product-media-container.constrain-height.media-fit-contain {
    max-width: 100%;
    width: 100%;
}
}

And Save.

Result:

Made4uoRibe_0-1726689963365.png
Made4uoRibe_0-1726689963365.png417×585 16.6 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

This is Richard from PageFly - Shopify Page Builder App

Hi @Leobassi Please add code here to fix image in mobile
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: Click on Theme.liquid and paste the code above the 

.product-media-container.constrain-height.media-fit-contain{
  width: 100% !important;
}

Hope this can help you solve the issue.

Best regards,
Richard | PageFly

4

I tried but it didn’t work. The picture just got a little bit bigger and moved to the left

5

Alright, i tried again with your help but it didn’t work, so i tried another time with another solution found on others post and it worked:
I changed a setting inside the theme editor “Adattamento dei contenuti multimediali”
and used another code in theme.liquid, just under and it worked!

@media (max-width: 749px) { .slider.slider--mobile { scroll-padding-left: 0 !important; } .slider.slider--mobile .slider__slide { padding-top: 0px !important; width: 100% !important; } }
6

Good to hear that!

Your base.css might be missing some symbols, which is why it’s not working.

Yes, you can paste that into the theme.liquid file using a tag, but I’ll still provide the code.

You can also paste on the custom css seen by the Customize theme.

:blush: