Adjust image size in a custom liquid

Danielpochapski · ‎05-09-2023

Hey guys,

I am using metafilds in a custom liquid to put custom texts on product descriptions. However, I have a problem with image alignment. It fits perfectly with the desktop, but on mobile it is formatted without formatting. Can anyone help me?

My site is: www.smartcasashop.com.br/products/new-mini-heater-household-small-heat-blower-desktop-office-portabl...

The custom code I'm using is:

Desktop

Mobile

drakedev · ‎05-09-2023

Hi, you should add max-width to your code, try this one:

<img style="display: block; margin-left: auto; margin-right: auto; width: auto; max-width: 100%;" src={{product.metafields.custom.imagem_problema_solu_o | img_url: '800x'}}>

If my answer was helpful click Like.
If the problem is solved remember to click Accept Solution.
Shopify/Shopify Plus custom development and support: You can hire me for simple and/or complex tasks.

View solution in original post

drakedev · ‎05-09-2023

Hi, you should add max-width to your code, try this one:

<img style="display: block; margin-left: auto; margin-right: auto; width: auto; max-width: 100%;" src={{product.metafields.custom.imagem_problema_solu_o | img_url: '800x'}}>

If my answer was helpful click Like.
If the problem is solved remember to click Accept Solution.
Shopify/Shopify Plus custom development and support: You can hire me for simple and/or complex tasks.

Danielpochapski · ‎05-09-2023

Thanks, @drakedev!

Adjust image size in a custom liquid

Adjust image size in a custom liquid

Community Blog Articles