Separate banner images on desktop and mobile and clickable images - Dawn theme

Store Design
, ,

Topic summary

A user wants to implement two features for banner images in their Dawn theme store:

Primary Goals:

  • Display different banner images for desktop vs. mobile devices
  • Make banner images clickable to redirect customers to a collection page

Current Status:

  • User already has properly sized images (Desktop: 1920×1080px, Mobile: 360×800px)
  • Needs custom code implementation to achieve both objectives

Proposed Solution:
A PageFly representative provided CSS media query code snippets to target different screen sizes:

  • Mobile (320px+)
  • Tablets (481px-960px)
  • Desktop/laptops (1025px+)

However, the conversation appears incomplete—the code snippet was cut off and doesn’t address the clickable functionality requirement. The discussion remains open with the user still seeking a complete solution for both responsive image display and click-through functionality.

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

I would like to be able to have separate banner images for mobile and desktop. I also want them to be clickable so that it directs the customer to a collection page when clicked. Thanks

2

Hi @brandonpho

This is Victor from PageFly - Landing Page Builder App.

You can use this size for computer and phone screen

Desktop 1920(width)×1080(height) and for mobile 360(width)×800(height)

Hope this answer helps.
Best regards,
Victor | PageFly

3

Hi, thank you for your reply. I already have the images with the right dimensions. I just need a code so that one image shows only on mobile and one image only shows on desktop. I also want them to be clickable.

4

@brandonpho you can refer to some code below to use it for different screen

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }