Mobile view is non-responsive in landscape orientation

Hi, not sure how to fix this, if you view the site on a mobile device like an iPhone 14 it looks great on phone and in the Designer, but when you turn the phone horizontal the objects in the hero section do not scale appropriately.

Ive tried to research and see others dealing with the issue but I couldnt find anything in the way of specifically adjusting sizing for specific blocks or something in that orientation.

Looks like this:

then this:


Here is my site Read-Only: [LINK][1]
([how to share your site Read-Only link][2])

HI @avmil you setting works as expected as you have set height of your element named flex-box to 100vh.

1 Like

how to make a website mobile responsive ? can someone please help me ?

Thank you, The issue Im having is that the element ‘Flex Box Image’ overlaps with ‘Flex Box 2’ when the mobile phone is turned horizontal as the second image shows.

Is there way to scale down ‘Flex Box Image’ only when the mobile landscape view is used, so they don’t overlap, or is my implementation just not work in this scenario? Its basically just two elements vertically centered and spaced out horizontally?

I switched out to used a flex grid layout with a single column and two rows, it seems to work sort of. I wanted the Flex Box Image element to be centered while the Flex Box 2 stick to the bottom of the full screen hero, but I think this works close enough.

hi @avmil you can apply specific CSS when mobile is turned landscape with CSS orientation. You need to use custom code as WF doesn’t offer this option in UI. For example you can set image smaller dimension or set height of element to auto instead 100vh when turned landscape.

Hey guys, I’m facing a similar mobile-responsive issue with 3 of my websites move-out painting Dubai. Made To Measure Curtains Dubai and Painters In Abu Dhabi Can anyone help?