A user is experiencing image alignment issues with custom liquid code used for product metafields. The images display correctly on desktop but lose formatting on mobile devices.
Technical Details:
product.metafields.custom.imagem_problema_solucao with an 800px image URLdisplay:block with auto marginsSolution Provided:
max-width property to the <img> markup to ensure responsive behavior across devicesStatus: Issue appears resolved after the suggested fix was provided.
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?
The custom code I’m using is:
<img style=“display: block; margin-left: auto; margin-right: auto; width: auto” src={{product.metafields.custom.imagem_problema_solu_o | img_url: ‘800x’}}>
Desktop
Mobile
Hi, you should add max-width to your code, try this one:
Thanks, @drakedev !