11 replies · opened Mar 15, 2021
Hello,
I noticed the slider height is bigger when seeing the site on a mobile device.
E.G. in my website the down arrow is not showing, and if you click on the view portfolio, the portfolio is also not aligned, then the arrow appears on the screen
Hello,
The Slider's Height on both Desktop and Mobile Devices are same and according to the Viewport. However, since the Transparent Header is disabled on Mobile Devices, the Slider is pushed down a bit. Consider using the following CSS Code:
[ch_pre type="css"]#header.transparent-header {
z-index: 299;
}
#header.header-size-custom + .include-header {
margin-top: calc( -70px - 2px );
}[/ch_pre]
This should definitely fix the issue. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
I added that to custom.css but it did not solved the problem.
Hello,
We have just checked out your Website and it appears to be working perfectly fine for us. Since the Text is large in the Hero Area the Height increase to fit the content, so you will need to add the following code to decrease the size on Mobile Devices:
[ch_pre type="css"]@media (max-width: 991.98px) {
.emphasis-title h1, .emphasis-title h2 {
font-size: 7vw !important;
}
}[/ch_pre]
This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
This does not solve the problem, please have a look in the screen recording.
The arrow does not show because there’s the browser navigation bar.
And when the user click on the button, the page does not scroll to the portfolio, but leave a space on top showing the arrow.
Hello,
Can you please consider attaching the Files again as we can't see it. Make sure that your Files are not more than 2MB in size as it will then not be uploaded.
Additionally, we have attached a Screen Recording of what we are seeing. Meanwhile, to remove the space from the Top after Scroll, simply replace the data-offset="65" with data-offset="0".
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Here's a print screen from my mobile.
I can only see the arrow if I scroll down a little bit.
Hello,
Unfortunately, this is a Browser Issue on iOS Safari: https://bugs.webkit.org/show_bug.cgi?id=141832 . Consider using the following code:
[ch_pre type="css"].min-vh-100 {
min-height: 100vh !important;
min-height: -webkit-fill-available;
}[/ch_pre]
This should fix the issue. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hello,
This issue with Safari on iOS still exists or there's a better solution for that today?
Thank you,
André.
Hello,
The issue actually is with iOS Safari Address Bar not recognizing the Viewport Height, so currently there is no solution available for this except for using JS or CSS workarounds. We will update the codes based on the Latest guidelines.
Let us know if we can help you with anything else or if you find any further issues.
Hello,
I changed the code in style.css to:
.min-vh-100 {
min-height: 100dvh !important;
min-height: -webkit-fill-available;
}
but the slider is still behind Safari's adress box.
Please see image attached.
How can I solve that?
Thank you,
André.
Hello,
Thanks for your Patience!
As we have mentioned, this is not related to Canvas's Codes but how Safari handles the .vh100 (Viewport 100% Height) Class. Currently, we do not have a inbuilt solution for this as this might mess-up other Browsers and Viewports, so we recommend using a Custom Solution for this.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard