How to show two different HTML, one only on desktop and one only on mobile.

Store Design
,

Topic summary

A user created separate HTML blocks for desktop and mobile versions of an image but both were displaying on all devices. The issue stemmed from using CSS classes (show-on-mobile, hide-on-desktop, etc.) without corresponding CSS rules to actually control visibility.

Solution provided:

  • Consolidate both images into a single HTML block
  • Add CSS media queries to control which image displays based on screen width
  • Desktop image shows above 768px viewport width
  • Mobile image shows at 768px and below
  • Uses display: none and display: block to toggle visibility

Outcome:
The solution was successfully implemented and resolved the problem. The original poster confirmed it “works like a dream” and marked the response as the accepted solution.

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

Hey. I need some help…

I’ve made two custom HTML, one for desktop and one for mobile. But they both show on desktop and mobile. What am i doing wrong?

The one for mobile:

The one for desktop:

Screenshot 2024-12-07 at 10.52.32.png
Screenshot 2024-12-07 at 10.52.32.png2866×534 116 KB

2

Hi @JTMollerup ,

I have written updated HTML with CSS. You can use the code below in the HTML section to toggle image visibility based on the device type. This updated HTML allows you to remove duplicate blocks and keep only a single HTML structure.


    
![Mobile Image|4063x125](upload://qZU9cRpEhZQTPiwdTinboOGpPb4.png)

    
![Desktop Image|4063x125](upload://qYXoSdsYhdj8qaHUpmqLo7p78CF.png)

If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Thank you

1 Like
3

Hello Theycallmemakka.

Thank you so much, it works like a dream!