White space between video (slider position) and top menu

I am experimenting with video background (http://bridge.realonlinewebdesign.com/) on the home page and noticed that with certain resolutions 1280x1024 (square monitor) there is a large white space between the bottom of the video and the top menu. When i look at it on my laptop 1600x900 it looks fine but on my android phone there is also a small white gap. Is seems like it’s not adjusting properly.

Hi,

You can fix that issue with this Custom CSS:

.site-header {
    position: relative;
    height: auto !important;
}

.has-video video {
    margin-bottom: -6px;
}

@media only screen and (max-width: 780px) {
.welcome-title {
    font-size: 50px !important;
}
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Hi. Thanks for the quick reply. That fixed the issue however, on the phone it now pushes part of the welcome message below the menu so you cannot see it. FYI: I am using this code to wrap the welcome text on two lines:

div.welcome-info div.welcome-title::after {
content: ‘To The Bridge Church’;
display: block;
}

Thanks…

Hi,

You can make the font-size smaller on mobile screen-size to make the text appear in header and don’t get covered by the menu with this Custom CSS:

@media only screen and (max-width: 480px) {
.welcome-title {
    font-size: 30px !important;
}
}

Please let me know how it works.

Best Regards,
Csaba

Csaba,

Thanks for the help, that worked great.

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba