Carousel width/height setting for iPhone in landscape mode

I Need Help
1

A work in progress for a hotel CHAMBRES de Petite Lucie Honfleur
How can I target the break point for an iPhone in landscape mode so that my carousels fits the screen as they are too tall. And also disable the visibilty of the sticky nav bloc at that breakpoint.
It works well in portrait mode and both modes of my iPad. Have I overlooked something when building this page ? Or do I just need to change the format of all the carousel images to match that of the iphone screen

Any other comments on the way this site is working for visitors would be welcome.
Thanks Richard

2

Je n’ai pas mon iphone là sous la main mais à vue d’oeil ca semble bien responsive avec Chrome et l’extension “Simulateur téléphone mobile”

3

Hi @calvados

The problem with iPhone is the view port height is affected by the browser interface.

image
image828Ă—386 25.8 KB

image
image828Ă—536 43.8 KB

(Although the search box is at the bottom these days but the problem is the same)

The fix is not using VH units. You will need to add some manaual CSS and use dvh.

dvh is dynamic viewport height.

I’ve suggested to norm we get these units added in the class editor in the past.

https://www.w3.org/TR/css-values-4/#viewport-variants

You won’t replicate this effect in any browser simulator.

1 Like
4

Thanks for the advice on this Pete. Up the learning curve I go ( or hope to go !)
Richard

1 Like
5

No worries.

“Docendo discimus” - by teaching we learn.

It’s very true that when you help others with understanding you develop more of it yourself. No subscription either :grin: pass it on.

1 Like