How to change image for Mobile vs Desktop for custom liquid added section?

Store Design
,

Topic summary

A user needs to display different banner images for desktop (1200px wide) and mobile devices, with both images linking to an external URL. They initially created a desktop-only solution using custom Liquid code but encountered display issues on mobile.

Solution Provided:
A PageFly representative shared CSS-based code using media queries to show/hide different images based on screen size:

  • Desktop image displays above 749px width
  • Mobile image displays at 749px and below
  • Both wrapped in clickable links

Implementation Issues:

  • Initial attempt showed both images on all devices (likely due to incorrect code placement or commented sections)
  • Revised code was provided to fix the display logic

Outstanding Problem:
Another user reported the code works for showing different images per device, but image sizes are not optimized—appearing “crazy big” and requiring proper dimension configuration.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

I need to add a big banner style image that is clickable to an outside link. I have made a 1200 pixel wide banner for desktop version… and it works! But obviously looks horrible on mobile. Can I make this section only viewable on desktop? And then make a section only viewable on mobile?

Or maybe there’s a coding solution within 1 section?

Here’s the code I’m currently using (I do not know how to code. but it is working):

2

Hi @LiveKingPoker

This is Victor from PageFly - Shopify Page Builder App

Please use my code here


![Banner-Try-for-Shopify.jpg?v=1680644258|1200x400](upload://AwlsK4lazelL5J4OWYkhleMBVM8.jpeg)

![Banner-Try-for-Shopify.jpg?v=1680644258|1200x400](upload://AwlsK4lazelL5J4OWYkhleMBVM8.jpeg)

Please remember to change your img source

Hope this can help you solve the issue

Best regards,

Victor | PageFly

3

Hi Victor. First of all, thank you very much for taking the time to reply.

I’m probably doing something wrong. I copy pasted your code directly into the “Custom Liquid” section… and then I changed the image source for the mobile view part of the code. The result is putting both images on both desktop and mobile. Any advice? Maybe I’m putting the code in the wrong place?

here is a screenshot for reference (the images are just placeholders to help test. the yellow and black for desktop… the chess pieces for mobile): https://cdn.shopify.com/s/files/1/0720/7567/3907/files/result.jpg?v=1680683849

4

Hi @LiveKingPoker I understand why, the reason because of the commented i gave :disappointed_face:

please try this


![result.jpg?v=1680683849|3228x2222](upload://1CJLWnqDXO5auhpkDgue4RQegGm.jpeg)

![Banner-Try-for-Shopify.jpg?v=1680644258|1200x400](upload://AwlsK4lazelL5J4OWYkhleMBVM8.jpeg)
5

Hi @PageFly-Victor

I tried your code. It works fine, it displays different images for mobile and desktop.

However the sizes are not optimized. It shows up crazy big. How can I set up the correct sizes?