How do I make an image in custom liquid responsive to different devices - Dawn theme

Store Design
, , ,

Topic summary

Topic: Making two product-page images (added via a Custom Liquid section in Shopify’s Dawn theme) responsive across devices.

  • Original setup: tags inside centered

    s, using asset_url and a “page-width” class. Goal is mobile/tablet responsiveness without exceeding the page’s content width.

  • Proposed fixes: Multiple replies advise CSS adjustments rather than HTML changes. Key suggestion: add max-width: 100% on the image tag. Another proposes max-width: 100% !important; and overflow-x: hidden !important; to prevent horizontal overflow.

  • Current issue: The OP reports that max-width: 100% did not solve the problem; on desktop the image extends wider than adjacent content. They want the images constrained within the same container width as the rest of the page.

  • Requests: Helpers ask for the store URL to inspect and provide a targeted fix.

  • Assets central to understanding: Screenshots show the image overflowing the layout versus the desired in-container alignment.

  • Status: Unresolved. Next steps hinge on sharing the store URL and refining CSS to constrain image width within the page container.

Summarized with AI on December 31. AI used: gpt-5.
1

hey id like to make the image sizes of two images responsive to the different devices and screen sizes. The images have been added to a custom liquid section on the product page and the code of the two is the following:

ManuelH_0-1713345987481.png
ManuelH_0-1713345987481.png661Ă—592 57.9 KB

ManuelH_1-1713346022557.png
ManuelH_1-1713346022557.png608Ă—468 45.6 KB

Does anybody know how to make it responsive to mobile and tablet?

Thanks

2

Hello @ManuelH

Can you share store URL?

3

To adjust the images according to the width of the device, you’ll need to adjust the CSS code. The HTML code you’ve provided seems correct; it should work fine. If you’d like, you can share the link to your store so I can assist you better.

4

Hello,

I am San from MS Web Designer.

Here is the solution:

Add max-width:100% on Image Tag

Hope this helps.

If you have any concerns, do let me know.

Regards,

San

1 Like
5

ahh I already had max-width=“100%” in there once but didnt work obviously :grinning_face_with_smiling_eyes: thanks San!

6

just found out, in desktop it then stretches beyond the other containers. And i want it to be inside:

ManuelH_0-1713364513270.png
ManuelH_0-1713364513270.png1119Ă—1078 102 KB

should be like this:

ManuelH_1-1713364581593.png
ManuelH_1-1713364581593.png2137Ă—838 111 KB

7

Hello,

Thank you for your reply.

Is it solved?

Do let me know in case of any queries.

Regards,

San

8

hey no unfortunately not, its still wider than all the other content on the page

9

Hello,

Thank you for your response.

Please share the store URL so that we can check and assist you.

Regards,

San

10

You can try to add this code:

max-width: 100% !important; overflow-x: hidden !important;