Hi I’ve tried to apply https://community.shopify.com/c/shopify-design/separate-banner-images-on-mobile-and-desktop-dawn-the… this to my shopify store to be able to add 2 images: One for the desktop version and the other for the mobile version.
The solution works great, exactly what I needed. However whenever I add the 2nd image, the first one becomes blurry all of a sudden. Also resizing the window makes the 1st image quality degrade considerably.
shop: lovetech.art
pass: techart
@KetanKumar Thank you for your reply, is the code fully compatible with Dawn 2.0 theme?
yes its work as well all them just flow proper step
@KetanKumar thank you for your reply.
I have implemented the code from the above guide step by step. Using base.css instead of legacy theme.css for the last piece of code.
It allows me to add the sections and select the images in the theme editor. However the images are not displayed.
This solution does not seem to work properly on the Dawn 2.0 theme. Any chance you have a fix for the solution implemented at the top of this post instead?
Found a temporary solution, probably not the best way to fix this but so far seems to be working.
Dawn Theme 2.5.0
Edit “image-banner.liquid” at line 46
From:
sizes=“{% if section.settings.image_2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}”
You basically replace 50vw with 100vw
Resulting code:
sizes=“{% if section.settings.image_2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 100vw, 100vw{% elsif section.settings.image_2 != blank %}100vw{% else %}100vw{% endif %}”
Only downside seams to be that the image will not be automatically resize to lower quality when browser window is scaled, for me is worth the tradeoff so far. If anyone with coding experience knows the proper way to fix it I will be very grateful!
thanks for update
Hi there,
the code is great, thank you.
Is there a way to use it in order to show an image only on mobile without desktop? leaving the first image empty?
thanks
can you please share store url
thanks but i can’t see any empty spacing please show me screenshot
I placed an image on desktop to deal with this for now.
I didn’t want to leave an empty space.
But if I don’t chose an image for the first image, it leaves a blank gap on
mobile even if I chose a second image
can you please send issue image?
Do you recommend I implement this feature “add 2 images: One for the desktop version and the other for the mobile version” ?
I am having issues with the clarity of mobile view, it is extremely blurry on my homepage banner. The homepage banner for desktop is perfectly clear. To correct the blurry mobile view, I have tried everything from changing file sizes, compressions, DPI’s etc. Thank you for your assistance and my website is www.NardosNatural.com