Bite-sized hotel highlights on desktop
Top-rated, In the spotlight, and Persona ratings have dynamic layouts for better utilisation of space on the desktop.
All highlights come with a guardrail, so there is partial visibility of highlights. How did I handle it?
Edge case scenarios.
A persona rating is dependent on the availability of the top-rated.
It is a straightforward approach when any highlights are unavailable on mobile because of the horizontal scroll.
Hide the element, and everything fits perfectly; however, change the width to the device width if there is only one highlight.