responsive design // mixture of vertical centered and top aligned elements?

Hi folks,

I hope to receive some support with my issue, please let me know if this is the wrong forum.

Basically I am struggling with the responsive design of our website.

The idea is to have an entrance page, where a hotspot element is always vertically centered with the background picture, which shows an stone arch. The hotspot element should be inside the arch with all thinkable viewports.
At the same time the few picture and text elements should be visible in the upper part of the picture, above the hotspot, also with all thinkable viewports.

Here is a screenshot: https://up.picr.de/44478647eo.jpg

Up to know I am about to go crazy as I am not able to find settings which work for all viewports. Portrait layout is always fine, but with landscape layout of tablet or mobile devices I do not find a solution.

Tablet portrait example okay

Tablet landscape example not okay

Is there a way to have only the hotspot aligned vertically centered and the other elements are aligned from top?

Many thanks in advance for any suggestions regarding this!

Best regards
Carsten

• This topic was modified 2 years, 5 months ago by weinh.