Canvas Support

Gap appears underneath menu and before content on mobile?

7 replies · opened Nov 5, 2021

GgripnripNov 5, 2021

When browsing my website on mobile there is an gap underneath the menu bar and the above the slider content.

I cannot debug using developer tools as cannot get it to render this way on desktop at all.

Any ideas?

SSemicolon WebSTAFFNov 6, 2021

Hello,

Thanks for reporting this! We have tried checking this out and it appears to be an issue with the Revolution Slider sizing. Consider replacing the .min-vh-100 Class added to the .slider-element DIV with just .vh-100 and let us know if this fixes the issue.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

GgripnripNov 6, 2021

Have made this change on the homepage and it hasn't made any difference?

SSemicolon WebSTAFFNov 8, 2021

Hello,

Thanks so much for your Kind Patience!

Consider using this class instead: .min-vh-lg-100 . Example:
[ch_pre][/ch_pre]

This will 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.

GgripnripNov 8, 2021

That worked! Thank you so much for the help, again!

SSemicolon WebSTAFFNov 8, 2021

Hello,

Glad your issues were resolved! :)

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

GgripnripNov 8, 2021

I've just realised that the video banners don't auto play in safari, they do in chrome? On mobile in particular.

What have I done wrong?

Happy to raise another thread if you prefer?

SSemicolon WebSTAFFNov 9, 2021

Hello,

Apple and Android do not allow autoplay for HTML5 Videos/Audio to prevent unsolicited usage of Bandwidth (which can be Cellular) on the User’s Mobile Device. They can only be played on their native Video Player.

Here is the Official Reference for Apple: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html .

Meanwhile, currently, the Inline Video Autoplay is supported only from iOS 10 onwards. You can use the following instructions to make it work on iOS 10 or above devices. Adding the playsinline Attribute to the <video> Tag should fix this. In Revolution Slider, you can simply add this to the Video Layer: data-videoattributes="playsinline".

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