White space under header when switching to landscape

  • Resolved silcarus

    (@silcarus)


    7 years, 3 months ago

    Hi,

    I’ve noticed that when I change from portrait to landscape on a tablet, a white space appears below the main header. It does not show when the page is loaded directly in landscape view.
    This white space is in a div with the id “kad-mobile-banner-sticky-wrapper” and the class “sticky-wrapper”
    Is it safe to add “display:none” to it or should it be fixed any other way?

    Also, I have a homepage with a Title Typed Text, but the loop option is off. Is there a way to hide the “typed-cursor” once the last piece of text is shown? It’s weird that it keeps being there on and off all the time.

    Thanks in advance

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hello,

    If you can send a link to your site, I’ll help you with CSS to hide this space.

    I don’t believe that there is a way to do this. Most site visitors wont be sitting at the typed text for that long anyways.

    Again, a link will be helpful in determining if there is a way to hide this.

    -Kevin

    Thread Starter silcarus

    (@silcarus)

    Here is the link.
    I noticed the white space on a Samsung Galaxy Note 10.1.
    I managed to replicate it on a computer following these steps:
    (I use Chrome)
    1. F12 to open dev tools and ctrl+shift+M to toggle the device toolbar.
    2. Select the smallest screen size (Mobile S – 320px).
    3. Reload the page. (This is important)
    4. Select the biggest screen size (4K – 2560px). There is the white space.

    I’m having a hard time finding the space that you’re referring to. Can you possible share a screenshot of it so I can be sure of what you’re wanting? You can host images here:
    https://www.postimg.org

    You can hide the cursor at all times by adding this CSS to Theme Options> Custom CSS:

    span.typed-cursor {
    display: none;
}

    -Kevin

    Thread Starter silcarus

    (@silcarus)

    I’ve recorded a video

    Ah, I understand now. That is simply an element from the mobile header that has to carry over when the screen size goes back to desktop.

    This will never be loaded for someone who views your site in desktop, only in mobile. And I think it would be quite unlikely that anyone but us tests the site in a way to make it appear. Regardless, this CSS will hide it. Just place into Theme Options> Custom CSS:

    @media (min-width: 992px) {
div#kad-mobile-banner-sticky-wrapper {
    display: none;
    }
}

    Let me know if that works for you.

    -Kevin

    Thread Starter silcarus

    (@silcarus)

    I know display:none will work, I just wanted to know if it was safe to use it or if that element was important in any way.
    I found that space while viewing my site on a tablet and changing from portrait to landscape, which is something users will probably do. That’s why I wanted to fix it.
    Thanks for the support.

    Display none will not have any adverse effect, as long as you use a media query as I did. If you just put it there without wrapping in a media query, then you would have issues with the display of your mobile header.

    -Kevin

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘White space under header when switching to landscape’ is closed to new replies.