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

Home Forums Support Cannot reduce huge white gap on mobile under menu

  • This topic has 10 replies, 3 voices, and was last updated 1 year ago by Leo.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1014096
    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.

    #1014108
    Leo
    Staff
    Customer Support

    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 🙂

    #1014122
    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.

    #1014224
    David
    Staff
    Customer Support

    Hi there,

    try unchecking the Full Screen option in the Header Element.

    #1014886
    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?

    #1014897
    Leo
    Staff
    Customer Support

    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 🙂

    #1014903
    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?

    #1015147
    David
    Staff
    Customer Support

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

    #1015444
    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!

    #1015466
    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?

    #1015471
    Leo
    Staff
    Customer Support

    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 🙂

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.