Carousel 100vh on mobile not working

[arminunruh]

ok so on an iphone, 100vh is actually the height of the browser + the top and bottom browser bars.

so the issue is not that the row/carousel is not set to browser-height, the issue is that on an iphone safari, browserheight is interpreted differently.

also it is interpreted differently for an iphone with a home-button and one without a homebutton.

you can try and create a custom phone layout and then use: "100vh - 110px" as your carousel fixed height. also make sure in that row, don't have your row be "browser height"

[User4000]

Hi @arminunruh thanks, I try it, but also this doesn't work. The final target is to create a carousel that can swipe horizontal, with show multiple slides, like in the desktop view (where is perfect) but in the mobile view. Have you other ideas to create it?

Thanks

[User4000]

I send you a screen to see the settings i check for desktop and doesn't work the same on mobile.
I try also with 100vh - 110px and with free drag selected but not work.

[arminunruh]

hey everybody

So i just released an update for both laytheme and the carousel plugin. Please update both.

Now in your carousel, as your fixed height, write: 100vh

Let me know if it works, if it doesn't do the trick, post the link to where you have the problem. Thx

[User4000]

Hi @arminunruh it seems to be perfect now! there is only the white space at the top and bottom if you try to scroll vertical, maybe is possible to deactivate the vertical? scroll function?

Thanks a lot

[DLB]

Hi @arminunruh

Thanks for the updates!

I still have an issue with the Carousel plugin on iOS / iPhone using the Safari browser, since yesterday’s updates. The fixed height does not display at 100vh – even though it’s set to that!

I've also tested it on the iOS Chrome and Firefox browsers and they display the Carousel with a fixed height at 100vh perfectly – just doesn't work on iOS Safari for some reason?

Prior to yesterday’s updates the Carousel worked fine for me at 100vh on iOS Safari.

The Carousel 100vh works fine for me on desktop though, on macOS Safari, Chrome, and Firefox.

Thanks again, for fixing the Carousel text slide positioning.

Des

[arminunruh]

do u have a link?¿

[DLB]

Hi @arminunruh

Link: https://deslloydbehari.co.uk/repository/

[arminunruh]

:D

nice website

so, what exactly is browser height on an iphone safari,
that's an interesting question

look at this picture
… ok i cant seem to upload images anymore, theres a bug in the forum.

anyway, the problem is when you scroll down, the bars on the top and bottom of safari's browser are removed. so 100vh is actually different from when you scroll up and scroll down.

the current 100vh is calculated for when the browser shows these bars

i will think about a solution to this, i wrote it down

[arminunruh]

ok,

here, a screenshot of the browser bars invisible:

and here is a screenshot of the browser bars visible:

[DLB]

@arminunruh Thanks for checking — really appreciate it. Hope you’re able to find a solution soon. Thanks for the compliment too — it's a cool theme to work with!

[no_caller_id]

Hi everyone, is there an update on this? I'm running into the same issue. Tried to fix it via THIS solution, however it didn’t work for me with just CSS.

How can I implement the Javascript solution in Lay Theme?

Thanks for your help!

[Richard]

Dear @no_caller_id

This was two years ago so just to clraify that it's about "space" that sometimes occurs at the bottom of a layout on Safari Mobile?

Are you able to post a link to your website with issue in question 🔍

I think Armin is looking into this as the new IOS has created some bugs with the Address/Navigation bar. Are you able to do some test to remove the menu bar in > Customize >

In the past this was the issue as the 100vh calculated the Menu Bar into it and created this space. (e.g 60px height of white space).

---

Talk soon & best wishes 🌻

Richard

[no_caller_id]

Dear @Richard

Thanks for looking into this. Yes it is about the space that occurs at the bottom, causing the footer area to disappear behind the navigation elements (mainly a Safari issue, it is working without problem in Firefox and Chrome).

I also have the issue when viewing the website on my iPad.

I already have the menu bar on "hide" in the customization menu.
Besides that the only element is the carousel with 100vh.

The link to my website is here: www.robinbrass.com

Another issue I have is when creating longer captions, with possibly two lines when viewed in mobile, for the inidvidual images in the carousel. This causes all captions to add one empty line below the text, resulting in the text not sitting on the bottom.

In general, would you rather advise to use the Fullscreen Slider Plugin in for my purpose?

Thanks and best wishes,
R

[Richard]

Dear R

@no_caller_id

Best wishes, hope you had a nice holiday season 🌝

Regarding the space at bottom on Safari IOS, I believe Armin is aware of this along with a few other users with similar bug, so should be worked out soon.

"causes all captions to add one empty line below the text, resulting in the text not sitting on the bottom."

The Single line captions you have sit higher - Should the two line comments on Mobile also sit higher?

---

Have a wonderful start to 2022 ✨

Richard