Main issue: Background banner images in the chutney/fruitcake sections appear too short on narrow browser widths (current assets ~2000x571), and simply enlarging them would harm desktop layout. A test link was provided.
Key recommendation: One image won’t fit all screen sizes. Use two assets—one for desktop and one optimized for mobile.
Actions taken: The section’s Shopify Liquid code was shared. The helper added a new mobile image setting (image_mobile) to the block schema and referenced it in the template, enabling separate desktop (image) and mobile images via image_picker.
Technical notes: Shopify Liquid is the theme templating language; image_picker is a theme setting that lets admins select images in the editor. Code snippets are central to the solution; a screenshot was referenced but not essential.
Outcome: The requester confirmed the change helped and said they’re beginning to understand the approach. They can update their mirrored right-layout section similarly.
Status: Effectively resolved with a clear path—use distinct desktop and mobile images for responsive design; no outstanding questions reported.
Hi @makersh ,
If you want to use one image for all sizes, it won’t really fit. So I recommend you to use 2 images for it, 1 display on desktop and 1 on mobile.
if you want, please send me the code of the file section, I will help you add options for it.