Product image full width on mobile - Dawn Theme

[Julietteweb]

Hello,

I want to display the product image in full-width on the mobile view. The codes I've tried don't work.

Often the image doesn't extend to the right of the screen, and the next image appears on the right. I'd like the product images to be full-width.

Here's the link to my store: https://ancestraathletes.com

Thank you!

[websensepro]

Hi @Julietteweb 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
@media screen and (max-width: 749px) {
    .product__media-list .product__media-item {
        width: 100% !important;
    }
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[Julietteweb]

Hello @websensepro 

Thank you for taking the time to help me. 

I added the code. It doesn't completly work. The image isn't completly full width, there is a space oon the left side and above the image.

[websensepro]

@Julietteweb , replace my old code with this and then tell me:

<style>
@media screen and (max-width: 749px) {
    .product__media-list .product__media-item {
        width: 100% !important;
    }
    .grid--peek.slider .grid__item:first-of-type {
        margin-left: 0 !important;
    }
   .section-template--22195795263753__main-padding {
       padding-top: 0 !important;
    }
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you like my help, you can help me buy a COFFEE

Thanks!

[Julietteweb]

@websensepro 

I replaced the code and I have now a little less space above de product image but is still the same on the left side. 

[Julietteweb]

Hello @websensepro 

do you know how I could make the product image completely full-width so that there's no shift to the left?

Thank you very much!

[Sangeetanahar]

hello @Julietteweb 

Go to online store ----> themes ----> actions ----> edit code ---->assets ---->base.css...> ...add the code end of the file

@media screen and (max-width: 749px) {
    .grid--peek.slider .grid__item:first-of-type {
        margin-left: 0 !important;
    }

.slider.slider--mobile .slider__slide {
    width: 100%;
}
}

If this was helpful, hit the like button and accept the solution.
Thanks

[Julietteweb]

Hello @Sangeetanahar 

Thanks for your time, the code works for showing the product image in full-width but the thumbnails became really big !

How can I change that ?

[Tech_Coding]

Hello @Julietteweb 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px)
   .product__media-item.grid--peek.slider .grid__item:first-of-type {
       margin-left: 0 !important;
    }
  }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Julietteweb]

Hello @Tech_Coding 

Thank you for your time. It did not work actually...