[Resolved] Hero not scaling the same on all screen sizes

[Davood]

Our hero image is not staying stationary when browser window is resized. We also want it to scale correctly on mobile with the text/gray bar in the same location.

Please refer to screenshots for visual of what we are talking about

In this pic https://paste.pics/f0fc665d2bfd3a1072b510f4f7c2fef4 there is extra white space between the brown bar and the image. Also in the the same screenshot you will notice the text is towards the middle of the picture we want it to be stationary. These two images were taken on a 27 inch imac with the browser window taking up approximately half the screen. We want the hero image to always look like it does in these two screenshots
top of page – https://paste.pics/416ce30b5df3b4ec8f548c3192ce9a29
center of page – https://paste.pics/bba1005c39062a6385e5e52e4632596d

The text should always be in the bottom third of the hero image the same way it is in the last screenshot… even on mobile.

Thanks in advance for your help.

[David]

Hi there,

the image and the text are all been added in Elementor which the Theme has no control over.

But i can tell you the the white space is appearing above the image because you have the Element Section set to full height – if you remove that the image will fill the container.

[Author]

Posts