Image/video overlap on border description of products

Topic summary

A store owner is experiencing layout issues where images and videos in product descriptions overflow beyond the designated border area, disrupting the page design.

Problem Details:

  • Media content (images/videos) extends outside the description container
  • The issue appears on product pages
  • Store is currently running on a development/preview version

Solution Provided:

  • Add CSS code to the theme’s theme.liquid file
  • Insert the code below the <head> tag
  • The CSS applies max-width: 100% styling to constrain images automatically
  • A separate code snippet is available for videos using the same implementation method

Outcome:

  • The CSS solution successfully resolved the image overflow issue
  • No manual adjustment of individual images required
  • The fix applies automatically to all images in description boxes
  • Video overflow can be addressed with an additional code snippet following the same process
Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.

Hi Everyone,

I need help in trying to limit my description contents within my theme border. Especially with Images and video sources.

Please see screenshot below: This image needs to fit inside the description border, Do i need to edit the image height and width one by one or is there a code that i can use.

Any for of help is greatly appreciated.

Thanks,

Hey @managementSHD ,

Can you share the link to your store please? Thanks!

Here you go, https://www.shophubdepot.com/. We are still on a dry run and trying to fix everything down to the detail. Your help is greatly appreciated.

Thanks!

Hey @managementSHD ,

I can’t find this product to test the description field. Can you publish this product?

Are you able to view it through this link? https://bnvx6svo6cwqtcg7-86431203620.shopifypreview.com/products_preview?preview_key=88831dc4c3117b9fbfee9afd1d68f44a

Thanks,

Hey @managementSHD ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.


Screenshot is for reference only, the correct code to paste is the one shown above.

Oh wow,

That worked like a charm. I dont have to manually adjust the images one by one if this is the cse

Thanks a lot!

You don’t have to, it’ll apply to all images in this box.

Great, Does this also apply to videos?

If you want it for videos, add this code also, under , same instructions