White space on mobile

I’ve seen other people having this issue but the code given to them hasn’t helped me. When I go down in size in the browser or on a mobile phone the page (a video gallery in my case) jumps down and there’s a gap between the menu and the page. Please help!

Also is it possible to keep my menu as it looks in the browser on a mobile device instead of having the three grey lines? It should be enough space.

I also wonder if I can change the line spacing in the body text.

my site: www.ellenvonzweigbergk.com

Thank you!

Hi,

Sorry for late responses.

I’ve checked your site in mobile screen but I don’t see the gap between menu and the page. Can you please to take a screenshot?

And to make the menu always displayed in all devices (no hamburger menu), you can try to use the following css code:

.btn-menu {
    display: none !important;
}
nav#mainnav-mobi {
    display: block !important;
    float: none;
    background: transparent;
}
#mainnav-mobi ul li {
    display: inline-block;
    float: none;
    padding: 0 14px;
    border: none;
}
#mainnav-mobi ul > li > a {
    float: left;
    position: relative;
    padding: 0;
    color: #1c1c1c;
}

you can put the css code in your child theme or use simple custom css plugin.

Thank you! I managed to solve the white space issue before.
BUT what I can’t figure out is how to change the line height? You can see on my About page that its too high.

Also the site is kind of slow and I don’t understand this with removing scripts and stuff. Can you help me?

Oh I see…

you can manage the line height of the content using the css code below:

.entry-content p {
    line-height: 15px;
}

And I don’t think your site is slow. I can access your site and open all of your pages and its load fast :slight_smile:

Hello Awan,
This does not quite work with the line height. It only changes on a mobile screen and its the least important since the higher line height actually works quite well on a smaller screen. It also removes all space between the menu and the video gallery (on mobile). I would also like to be able to change the line height for header, description and menu if possible.

And according to speed tests online it is slower than average:

https://developers.google.com/speed/pagespeed/insights/?url=ellenvonzweigbergk.com

Thanks for helping!

Sorry I fixed it now! I put this at the top of the custom css, I guess there was some code directing it towards mobile only above it. But I still would like to change the distance between header and site description and menu if possible.

“It also removes all space between the menu and the video gallery (on mobile)”
> That was because you put “new line” before you put the video gallery. Maybe you can use these css code below instead of adding new line to the page:

.vimeography-squares {
    margin-top: 145px !important;
}

And here is the css code to manage the line height of header stuff:

.site-title {
    line-height: 30px;
}

.site-description {
    line-height: 30px;
}

.mainnav a {
    line-height: 20px;
}