How to make product image full width on mobile?

[ltw_00]

Hello there,

I have been trying to make all product images full width with no padding on both sides on mobile. And i try different code but doesnt seem to work. We are using Dawn theme at the moment.

Anyone can help please? 

the website is: https://latetoworkjewellery.com/

[Made4uo-Ribe]

Hi @ltw_00 

Check this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
@media only screen and (max-width: 749px){
section#MainProduct-template--17139978371246__main .page-width {
    width: 100% !important;
    max-width: 1400px !important;
    padding: 0;
}

.product__info-wrapper.grid__item {
    margin: 0 1.5rem;
    padding: 0 1.5rem;
}
}
</style>

And save. 

Result:

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

[ltw_00]

Hi there,

Thanks for the reply - I tried on the code and it works. However it also created a gap on the right screen when you scrolls - is there a way to fix this? 

Thanks a lots for your help 🙂 

[Yanthtech]

Here’s a shorter reply:

Hi there,

To make the images full width, you'll need some CSS adjustments. If you'd like help with that, I can assist you!

Best,
Esther

[BSSCommerce-B2B]

HI @ltw_00 , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

@media screen and (max-width: 749px) {
  .product__media-list.contains-media.grid {
    column-gap: unset !important;
    scale: 1.04 !important;
  }
}

Step 3: Save and reload home page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

[ltw_00]

Hi there,

I tried the code but doesn't seem like it work. 

The layout still look the same when I added the code.

Cheer,