Re: Page Width Product Description Image Overlapping

Page Width Product Description Image Overlapping

caseiry
New Member
7 0 0

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

34CEC0E7-E29B-47F3-B946-381FB6634280_1_105_c.jpeg

CF608E18-77D2-473D-8E36-494F9412BB59_1_105_c.jpeg

 
Replies 11 (11)

PageFly-Noah
Shopify Partner
1317 233 274

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

 

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


PageFly - #1 Page Builder for Shopify merchants.


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

caseiry
New Member
7 0 0

caseiry.com

caseiry
New Member
7 0 0

Thank you

PageFly-Noah
Shopify Partner
1317 233 274

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>

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


PageFly - #1 Page Builder for Shopify merchants.


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

caseiry
New Member
7 0 0

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
Shopify Partner
1317 233 274

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.

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


PageFly - #1 Page Builder for Shopify merchants.


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

caseiry
New Member
7 0 0

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
Shopify Partner
1317 233 274

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>

 

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


PageFly - #1 Page Builder for Shopify merchants.


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

caseiry
New Member
7 0 0

Where exactly should I implement it?

Screenshot 2024-04-01 at 3.38.19 PM.png

PageFly-Noah
Shopify Partner
1317 233 274

hi @caseiry  You can add code it in here:

PageFlyNoah_0-1712023567750.png

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

 

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


PageFly - #1 Page Builder for Shopify merchants.


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

caseiry
New Member
7 0 0

Hey I tried both and nothing my brother. Screenshot 2024-04-02 at 12.41.22 AM.png

What an issue.