The main page has a video background. in the mobile version, with Google CHROME (on android), when it first starts, the is a patch of GREY. At some point, the video zooms in and fills the entire field of view, but that Grey area shouldn't be there in the first place. Is it an error because of the shape divider? Can you provide a solution?
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
On phones Samsung S9+ and S22 ultra, Browsers - Brave and Chrome. Sometimes it works good, other times it's how it is in the picture. Just refresh a few times and I'm sure you'll see it.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (min-width: 1px) and (max-width: 999px) {
.wpb_row .nectar-video-wrap.position-loaded video {
min-height: 700px;
}
}
Hi!
The main page has a video background. in the mobile version, with Google CHROME (on android), when it first starts, the is a patch of GREY. At some point, the video zooms in and fills the entire field of view, but that Grey area shouldn't be there in the first place. Is it an error because of the shape divider? Can you provide a solution?
Also, this doesn't happen in Firefox (android)
There is no grey background.
Thank you!
Hey Again,
That is the Row Background.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
div#about .row-bg-overlay { background: transparent !important; }Thanks
ThemeNectar Support Team
thank you! but this still doesn't look right. the divider is supposed to go over the divider, not under it.... no?!
Hi Simon,
Did you mean the divider to go above the element I have pointed above it:
Thanks.
no, I have attached a photo for you to understand
Hi Simon,
I am still not replicating, please let us know the device from which you are replicating this.
Thanks.
On phones Samsung S9+ and S22 ultra, Browsers - Brave and Chrome. Sometimes it works good, other times it's how it is in the picture. Just refresh a few times and I'm sure you'll see it.
Thanks!
Hi Simon,
Please try this css:
@media only screen and (max-width: 690px){ .nectar-shape-divider {bottom: 72px;
} }
Thanks.
nope. it just looks worse! please see picture
Hi Simon,
Please remove the css and try turning off lazy loading from the Salient > General Settings > Performance section or any lazy loading plugin.
Thanks.
this was always off. I have no other lazy loading plugins
thanks!
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (min-width: 1px) and (max-width: 999px) { .wpb_row .nectar-video-wrap.position-loaded video { min-height: 700px; } }Thanks
ThemeNectar Support Team