How to hide and show images on mobile, desktop

Support
1

In a post, there are 10 images.

The first 5 images, how to hide on mobile (still show on desktop).

The last 5 images, how to hide on desktop (still show on mobile).

Is there any reasonable HTML and CSS for me to do the above?

Thank you very much Discourse experts.

2

Hey,

I think the most reliable way is to wrap the images.

[wrap="hide-mobile"]
... first five images
[/wrap]

[wrap="hide-desktop"]
...last five images.
[/wrap]

Then, the CSS:

In Mobile tab:

[data-wrap="hide-mobile"] {
    display: none;
}

In Desktop tab:

[data-wrap="hide-desktop"] {
    display: none;
}

What do you think?

7 Likes