[Resolved] Cannot reduce huge white gap on mobile under menu

[ClearCity]

Hello and thank you for continuously improving GP. I am stuck and have spent hours trying to reduce the huge white gap between the menu and the GP Premium video header on mobile phones and ipads. I’ve researched here and put in css recommended on other threads, messed with the paddings and margins, but cannot get it. Any assistance would be appreciated.

[Leo]

Hi there,

Are you talking about this area?
https://www.screencast.com/t/ZBoc9G5m

That’s actually the content.

Are you not adding any content on that page?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ClearCity]

Yes, I do want to add content to that page. I’m talking about this gap on mobile: http://advdms.com/clients/sunrisedentistry/gap/
Thank you.

[David]

Hi there,

try unchecking the Full Screen option in the Header Element.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ClearCity]

That worked to get rid of the white gap, but as soon as I unchecked Full Screen the video header did not show up at all on mobile devices. I’m not sure how to reduce some of the white on the top and bottom (I had the content set to vertical top, but changed it to center). Any recommendations?

How do you get a video header to play (or even show up) on Safari?

[Leo]

The video should show up without the full screen option.

Make sure you’ve added some padding as it determined the height of the header element:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-4-set-the-height

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ClearCity]

(EDITED) My mistake – it does show on Android with the full screen unchecked and looks very good, but not on an iphone. Is there some special coding to get a video to show up/autoplay on an iphone?

[David]

try adding the playsinline parameter to the <video> tag and make sure the device isn’t in low power mode

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ClearCity]

I tried several code variations, and this finally worked for me for the video to show on both Android and iphone properly.

In the GP Premium header element (Page Hero tab)

<video autoplay loop muted playsinline class=”background-video”>
<source src=”your-video-link.mp4″ type=”video/mp4″>
</video>

Container: Full Width
Inner Container: Full Width
Full Screen – unchecked
Padding for mobile 90 px on top (for this design)

(Site Header tab)
Merge with Content
Various offsets for desktop/mobile for this design

I appreciate your patience and the recommendations of adding padding, unchecking full screen and adding playsinline. Thank you Leo and David – You guys rock!

For anyone wondering about getting GP Premium – it is worth every penny and then some!

[ClearCity]

Quick question – I’ve used this code on another site – now the video shows on iphone, but that video is not responsive. Is there a CSS code so the video shows at the proper size on mobile devices?

[Leo]

Background video and background images aren’t responsive by nature unfortunately.

We set a background image instead of background video for mobile if you’d like?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts