Home page slider does not fill page height on mobile

4 years, 5 months ago merinoxvii
Participant

The main slider on the home page, when looked at on a small device such as a phone, it only takes about half the height of the container leaving the other half with an empty dark space. I have published my site and I just can’t find a way to fix this. You can view it at tutortonym.com. Also, I hadn’t seen the live demo from themeforest.net on a mobile device until I came across this issue and it seems like the live demo has the same issue. When developing on the computer it looks good even on the phone emulators. However, once in production and when viewed from an actual phone, it does not look right. Is there a way to fix this? Thank you.
4 years, 5 months ago themes2go
Keymaster
Hi!
You can try please adding this css?
```
.qt-material-slider .slides, .qt-material-slider, .qt-material-slider .slides > li, .qt-material-slider .slides > li .qt-slider-caption {height: 100vh !important;}
```
4 years, 5 months ago merinoxvii
Participant

I added the provided css and the height looks good now. However, there is still a black space below the slider images.

4 years, 5 months ago merinoxvii
Participant

I was expecting more feedback on the issue, but it seems like that’s all, there is no solution. I’ll have to remove that slider and implement my own which defeats the purpose of me buying this template. For anyone thinking about buying this template, look at it from an iPhone and you’ll see the flaw. Think twice before buying this template as iPhone users will not see your site as nicely as it looks on desktops and you’ll have to live with it or like me end up replacing that main slider which is what caught my attention in the first place.

4 years, 5 months ago themes2go
Keymaster

Hello!

We didn’t forget of you 🙂
Our developers are still checking the issue (our offices were closed due to national holidays) and we will back to you as soon as possible with a fix so you can use the provided slider instead of yours 😉

I’ll keep you posted.

Andrea
4 years, 5 months ago themes2go
Keymaster
Hello! Sorry for the delay, please add this CSS, it should fix the problem.
It was a nasty bug to fix as was involving only some browser versions, and wasn’t happening on the development environment.

Wit this it seems to work fine (you can remove the previous code as is contained here).
```
.qt-material-slider .slides, .qt-material-slider, .qt-material-slider .slides > li, .qt-material-slider .slides > li .qt-slider-caption,
.qt-material-slider .slides > li .qt-part-archive-item .qt-part-archive-item-header {height: 100vh !important; height: calc(100vh - 70px) !important; min-height: 550px;}
```
4 years, 5 months ago merinoxvii
Participant

That seems to have worked. Thank you very much. I take back what I said and this template is perfect now. I will give you guys five stars.

4 years, 5 months ago themes2go
Keymaster

Glad it helps you fix the issue 🙂
Thanks for you rating!

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Home page slider does not fill page height on mobile’ is closed to new replies.

TIME FOR A BOOST!

You can already use the new helpdesk!

Community Forums

Home page slider does not fill page height on mobile