THE DESKTOP HERO LOOKED TERRIBLE ON A PHONE
The flask kept getting cropped in all the wrong places, so we stopped trying to be clever about it.
ONE IMAGE WAS NOT ENOUGH
The desktop art is wide and composed around a lot of empty space. On a phone that space disappears and the crop starts deciding the composition for you. Sometimes it cut too much of the flask, sometimes it made the whole thing feel oddly off-centre.
WHAT WE ENDED UP DOING
We made a separate portrait version for mobile and switch between the two at the breakpoint. It is a very simple solution and it immediately looked better.
THEN WE CHANGED IT AGAIN
Once the portrait art was in, the image still felt like a big poster sitting under the hero copy. We changed the mobile layout again so the text and buttons sit inside the artwork instead. That is closer to where it is now, although we are still adjusting the contrast so the flask stays bright without the text disappearing into it.