Image/video overlap on border description of products

Store Design
, , , ,

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.
1

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.

managementSHD_0-1712852329457.png
managementSHD_0-1712852329457.png818×746 267 KB

Any for of help is greatly appreciated.

Thanks,

2

Hey @managementSHD ,

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

3

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!

4

Hey @managementSHD ,

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

5

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

Thanks,

6

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.

ThePrimeWeb_0-1712921413411.jpeg
ThePrimeWeb_0-1712921413411.jpeg1253×933 87.9 KB

7

Oh wow,

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

managementSHD_0-1712921620262.png
managementSHD_0-1712921620262.png683×591 165 KB

Thanks a lot!

8

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

9

Great, Does this also apply to videos?

10

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