All articles

Display full width + Resizing consistency

Sep 28, 2022

Picture of the author
Benoit Cotte

I wanted the experience to be closer to an original browsing experience on a webpage.


With the previous prototype, the image was contained in the window. Therefore, using screenshots of long images like landing pages, the result was mediocre. It resulted in small content for long images likes landing pages (see below).

Picture of the author


Now, images render as wide as possible, which gives a feeling of being browsing content naturally. You can now (finally) read the content if the image has a landing page-like ratio.

Picture of the author

Moreover, zooming, or resizing the window, does not impact the message position. Once you place a message on the image, it keeps its focus on the point of the memo where you put it.

Picture of the author

The main reason for this is that I relied on a 3p library to render the hotspot. I needed to rebuild this rendering from scratch. 👋 Ciao react-image-hotspots. It was great for delivering the last version on short notice, but this new code base is a better fit for vero.


→ One last thing: it now renders properly on all the major browsers! Yewwwwww!