Dawn theme mobile view product image full width - customization

[Sivadarshan]

I'm using the dawn theme in that I need to customize the product page in mobile view by making the product image to the edge of the website. I'll share the reference image for the outcome.

Website to work: https://vg58srr237cymewo-73415852291.shopifypreview.com

Password: 2512

Thanks in advance

[Dotsquares]

hi @Sivadarshan 

You can achieve a full-width product image on mobile in the Dawn theme with some custom CSS. Try adding this to your theme’s CSS file (base.css or theme.css):

@media screen and (max-width: 768px) {
  .product__media-container {
    width: 100vw !important;
    margin-left: -50vw;
    left: 50%;
    position: relative;
  }

  .product__media {
    width: 100% !important;
  }
}

Steps to apply:
Go to Online Store > Themes > Edit Code
Open base.css or theme.css in the Assets folder
Paste the CSS at the bottom and save

[Sivadarshan]

@Dotsquares Not working