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

ManuelH
Excursionist
48 0 6

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: 

1)

<div style="text-align: center; margin-left: auto; margin-right: auto; margin-top: 2em; max-width: 100%">
<img class="page-width" src="{{'Untitled design (54).png' | asset_url}}" />
</div>

ManuelH_0-1713345987481.png

2)

<div style="text-align: center">
<img src="{{'Untitled design (56).png' | asset_url}}" class="page-width"/>
</div>

ManuelH_1-1713346022557.png

 

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

 

Thanks

Replies 9 (9)

techlyser_web
Shopify Partner
1507 279 300

Hello @ManuelH 

Can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Spac-es
Shopify Partner
360 104 124

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.

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

SAN_MSWEB
Shopify Expert
1105 131 137

Hello,

 

I am San from MS Web Designer.

Here is the solution:

 

Add max-width:100% on Image Tag

 

<img class="page-width" src="{{'Untitled design (54).png' | asset_url}}" style="max-width:100%" />

Hope this helps.

 

If you have any concerns, do let me know.

 

Regards,

San

 

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

ManuelH
Excursionist
48 0 6

ahh I already had max-width="100%" in there once but didnt work obviously 😄 thanks San!

Spac-es
Shopify Partner
360 104 124

You can try to add this code:

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

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
ManuelH
Excursionist
48 0 6

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

ManuelH_0-1713364513270.png

 should be like this: 

ManuelH_1-1713364581593.png

 

SAN_MSWEB
Shopify Expert
1105 131 137

Hello,

 

Thank you for your reply.

 

Is it solved?

 

Do let me know in case of any queries.

 

Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

ManuelH
Excursionist
48 0 6

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

SAN_MSWEB
Shopify Expert
1105 131 137

Hello,

 

Thank you for your response.

 

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

 

Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin