Full Width Porduct Pictures DAWN 15.1

Leobassi · ‎09-18-2024

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!

Leobassi · ‎09-19-2024

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 <head> and it worked!
<style> @media (max-width: 749px) { .slider.slider--mobile { scroll-padding-left: 0 !important; } .slider.slider--mobile .slider__slide { padding-top: 0px !important; width: 100% !important; } } </style>

View solution in original post

Made4uo-Ribe · ‎09-18-2024

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:

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

If this fixed your issue Likes and Accept as Solution is highly appreciated.☕ Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

Leobassi · ‎09-19-2024

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

Leobassi · ‎09-19-2024

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 <head> and it worked!
<style> @media (max-width: 749px) { .slider.slider--mobile { scroll-padding-left: 0 !important; } .slider.slider--mobile .slider__slide { padding-top: 0px !important; width: 100% !important; } } </style>

Made4uo-Ribe · ‎09-19-2024

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 <style> tag, but I'll still provide the code.

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

😊

If this fixed your issue Likes and Accept as Solution is highly appreciated.☕ Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

PageFly-Richard · ‎09-19-2024

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 </body>

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

Hope this can help you solve the issue.

Best regards,
Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)

All features are available from Free plan. Live Chat Support is available 24/7.

Full Width Porduct Pictures DAWN 15.1

Full Width Porduct Pictures DAWN 15.1

Community Blog Articles