Site has a large white gap on a tablet device

Support
#1

See screenshot:

Looks ok on desktop.

Thanks.

#2

Hello @logoglo,

Thanks for writing in!

Actually on my end that white spacing is showing up on desktop screen too. I see that a inline CSS has been added and that’s why that spacing is showing up.

Please add following CSS under X > Theme Options > CSS:

header.masthead {
    height: 70px;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

I added that code, but the white gap is still showing, what browser did you use for the desktop, it doesn’t show the gap on my desktop pc…

What and where is the inline css that is adding the gap?

#4

Hi @logoglo,

Kindy replace the code with this

header.masthead {
    height: auto !important;
}

Make sure you close your @media code before adding it.


@media only screen and (max-width:768px) {
    .button-align {
        float: none
    }
} /* <- this bracket was missing */

    header.masthead {
        height: auto !important;
    }

Hope that helps

#5

Perfect! thanks, that worked.

#6

You are most welcome. :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.