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

[JTMollerup]

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:

</div>
<div class="show-on-mobile hide-on-desktop">
<img src="https://cdn.shopify.com/s/files/1/0836/8033/0051/files/Mobil.png?v=1733560757" alt="" />
</div>

The one for desktop:

<div>
<div class="show-on-desktop hide-on-mobile">
<img src="https://cdn.shopify.com/s/files/1/0836/8033/0051/files/Dansk_virksomhed_1.png?v=1733526626" alt="" />
</div>

 

[theycallmemakka · Accepted solution]

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.

<style>
/* Hide all images by default */
.responsive-image img {
    display: none;
}

/* Show the mobile image on small screens */
@media only screen and (max-width: 768px) {
    .responsive-image .mobile-only {
        display: block;
    }
}

/* Show the desktop image on larger screens */
@media only screen and (min-width: 769px) {
    .responsive-image .desktop-only {
        display: block;
    }
}

</style>
<div class="responsive-image">
    <img src="https://cdn.shopify.com/s/files/1/0836/8033/0051/files/Mobil.png?v=1733560757" alt="Mobile Image" class="mobile-only">
    <img src="https://cdn.shopify.com/s/files/1/0836/8033/0051/files/Dansk_virksomhed_1.png?v=1733526626" alt="Desktop Image" class="desktop-only">
</div>

  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

[JTMollerup]

Hello Theycallmemakka.

Thank you so much, it works like a dream!