Video Header Not Tight To Menu
Douglas B
Hello,
I have been trying to implement a video header into the front page of my website. I have been doing this by creating a row at the top of the page and then going to Row Options > Style > Enable Background Options > Enable Youtube/Vimeo Video in Background. I am also specifying the height of the video as per my video height.
When viewing this, it is nice and tight to the underside of the menu section when in full screen on a desktop, but when viewed in smaller screen resolutions, tablet and mobile, a bunch of white space develops between the bottom of the menu area and the top of the video header.
Can anyone shed some light onto why this might be happening?
Douglas B
Accepted AnswerI want to thank Ofi Khan for his help with this issue. There seems to be some real quirks with grabbing a section and implementing it in your page design. The conclusion for me was that the custom code did indeed fix the front page video header and spacing issues that i was facing, BUT it consequently broke all the other headers from other menu sections that were not set up as the same size as the front page. If you are experiencing this issue, and if your headers are the same size, this would be a great custom fix provided by Ofi Khan. Thank you again for your patience and your help Ofi.
#sp-main-body #sp-page-builder .page-content .sppb-section:first-child{
margin: -40px 0px -30px;
}
@media only screen and (max-width: 1440px) {
#sp-main-body #sp-page-builder .page-content .sppb-section:first-child{
margin: -80px 0px -110px;
}
}
@media only screen and (max-width: 1024px) {
#sp-main-body #sp-page-builder .page-content .sppb-section:first-child{
margin: -128px 0px -158px;
}
}
Ofi Khan
Accepted AnswerHello Douglas B
Please share your administrator access here to check the issue. Use the Hidden Content box to share the credentials.
Best regards
Douglas B
Accepted AnswerHello Ofi Kahn, thank you for your reply. I have included administrator login details for you.
Douglas B
Accepted AnswerHello,
@Ofi Khan - have you been able to check things out yet with the admin details i added a few days ago? Hope everyone is having a great day today.
Douglas B
Accepted AnswerHello Ofi Khan,
Thank you very much for fixing the issue.
Can you please outline what was the problem, as well as what CSS code you implemented so that I can manage this next time without bothering support here for a fix. As well, any others that might be having a similar problem can look here and see the correct code and where to put it. Thank you again.
Douglas B
Accepted AnswerGood Morning Ofi Khan, Thank you for the explanation of where the code is.
I now see by creating negative margin at the top of the video header with your custom css it fixes the spacing between the header and the menu area, but the same issue exists as now it creates the excess margin below the video header. (not on full screen desktop, but any resolution smaller).
Douglas B
Accepted AnswerHello Ofi,
Please see attached screenshot.
Ofi, i need to mention too, that the custom CSS code breaks the standard image headers on the other pages. Please view another main menu link to see what I mean. Thank you for helping, I really appreciate it.