Issue: A Shopify page uses a custom Liquid img tag (inline style width:1350px) as a workaround to an Image Banner sizing issue. Result: image appears too small on desktop and overflows on mobile. Minimal CSS on the container (div { position: relative; left: 0px; }).
Key code context: <img … style=“width:1350px;”> is a fixed pixel width, which prevents responsive scaling across devices.
Proposed fixes:
• Change inline width to a responsive value: style=“width:100%;” so the image scales with its container.
• Alternatively, set a viewport-based width: style=“width:100vm;” to span the viewport (suggested by another participant).
Status: No confirmation from the original poster on results; discussion remains open.
Notes: Liquid is Shopify’s templating language; CSS width set in % or viewport-based units is intended to make the image responsive across desktop and mobile.
Hi! https://qtupb6-n1.myshopify.com/pages/stage-presence
I have this custom liquid of an img; worked better this way as rendering with an image banner there was a sizing issue (this was a work around). Only problem is it isn’t stretching correctly when full screen on desktop or mobile.
For desktop the image is too small and mobile the image spans past the screen.
liquid:
CSS:
div {
position: relative;
left: 0px;
}
Any suggestions? Thank you!!!
@VicBrew1 - style=“width:1350px;” this is spanning the image, change 1350px to 100% and check
