Hello, I am asking something more out of curiosity than out of necessity or urgency.
I want to place 3 images side by side, making them equally share all the space in width, without borders, and I want these images to be clickable to launch an external weblink that is different from the image. So what I expect when I click on the image is not to enlarge or open the image, but to launch a web page. Looking around, and asking ChatGPT as well, I realized that I could write the thing in HTML like this
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;"> <a href="https://en.wikipedia.org/wiki/Red"> <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/Solid_red.svg" alt="Red" style="width: 100%;"> </a> <a href="https://en.wikipedia.org/wiki/Green"> <img src="https://upload.wikimedia.org/wikipedia/commons/1/16/Solid_lime.svg" alt="Green" style="width: 100%;"> </a> <a href="https://en.wikipedia.org/wiki/Blue"> <img src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Solid_blue.svg" alt="Blue" style="width: 100%;"> </a> </div>
That works perfectly on Obsidian desktop version but less so on the mobile version. In the sense that clicking on the images launches the weblink, But before that the image is also enlarged, and as said I would like to avoid it because when later you close the open web page and go back to Obsidian you then have to close also the open image.
As you can see, not a big deal… But can it be avoided?