Page Width Product Description Image Overlapping

[caseiry]

Hello. I changed my product description to full page width. My pictures in my description are too big and I can't figure out how to resize them. Is there a code to automatically fit it? Also, for it to fit perfectly on mobile view too. I'm having an overlapping issue with my description images.

Thanks

 

 

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

Best regards,

Noah | PageFly

[caseiry]

caseiry.com

[caseiry]

Thank you

[PageFly-Noah]

Hi @caseiry  I have check in my phone but it show normal , you can see image: https://monosnap.com/direct/mkZx0bb0wR0nwu6v53R5HEOXOYFXQe
You can try add code here in file theme.liquid and above tag </head>:

<style>
 html,body{overflow: hidden !important;}
</style>

[caseiry]

The issue arises when you scroll down to the description. If you are on mobile, you can zoom out completely like on the picture I sent.

[PageFly-Noah]

Iam sorry about that. In my device it not have issue. You can clear cache browser and try again, and if still you can provide me type mobile you check. Because in my mobile and laptop it not have issue.

[caseiry]

Yes sorry. I was editing my website and I had published a different theme which didn’t have that code in for the full page width. I just changed it back so you should be able to see it now. My mistake, forgot that theme didn’t have it set up yet. Thanks again

[PageFly-Noah]

Hi @caseiry  You can follow add code here in file theme.liquid and above tag </head>:

<style>
 @media only screen and (max-width: 767px) {
   .detail-desc-decorate-richtext div img{
     width: -webkit-fill-available !important;
   }
   .detail-desc-decorate-richtext img{
     width: -webkit-fill-available !important;
   }
}
</style>

[caseiry]

Where exactly should I implement it?

[PageFly-Noah]

hi @caseiry  You can add code it in here:

Or you can add code it in the end file base.css but you need delete tage <style> and </style>.

[caseiry]

Hey I tried both and nothing my brother. 

What an issue.