To clarify: Gray gap was at bottom of screen on the two screenshots even though it is ONE page. (I purchased the Salient template.)
I removed the first code and replaced it with this:
@media only screen and (max-width: 769px) { #footer { padding: 0 !important; } #footer .flex_column { margin-bottom: 0!important; }}
Seemed to fix it. Gap is gone. If you can come up with a better fix, please let me know.
**I turned the page full screen rows option off for mobile devices and now the large image on screenshot #1 doesn't stretch to the bottom of the screen on mobile phone--see screenshot #1A attached. I'd like to have the option of turning this off and I think the image should be covering the entire screen. Can you help with this related issue?
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 690px) {
.full-page-inner-wrap[data-name="home"] {
height: 100vh;
}
}
No more gaps for sure. But the image looks too big vertically. Can it fit better with additional/different code? I wanted it to fit the size of the browser window vertically. What is the perfect size for an image used here?
Unfortunately the image cant be adjusted perfectly for both desktop and mobile . The css provided earlier was just a hack and the image would look big since you want that row to expand to the Browser Height .
Try adjusting the value below to experiment :
@media only screen and (max-width: 690px) {
.full-page-inner-wrap[data-name="home"] {
height: 89vh;
}
}
Much better. I like it. Thank you so much for your prompt and helpful reply!! I see why there are so many great reviews and comments about Support and well as the themes.
Adding the CSS to the salient options panel i.e. salient \ general settings - css script related - custom css code will preserve it over theme updates since that data is kept in the database.
If you are adding the CSS to the theme files then use a child theme as and update will wipe out those changes.
I found this code online to fix the gap below the header when page full screen rows is turned on for mobile devices.
@media only screen and (max-width:1000px){
#header-space { height: 44px !important}
}
NOW, there is a dark gap at the bottom.
Thank you for your help.
To clarify: Gray gap was at bottom of screen on the two screenshots even though it is ONE page. (I purchased the Salient template.)
I removed the first code and replaced it with this:
@media only screen and (max-width: 769px) {
#footer { padding: 0 !important; }
#footer .flex_column { margin-bottom: 0!important; }}
Seemed to fix it. Gap is gone. If you can come up with a better fix, please let me know.
**I turned the page full screen rows option off for mobile devices and now the large image on screenshot #1 doesn't stretch to the bottom of the screen on mobile phone--see screenshot #1A attached. I'd like to have the option of turning this off and I think the image should be covering the entire screen. Can you help with this related issue?
Thanks!
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 690px) { .full-page-inner-wrap[data-name="home"] { height: 100vh; } }
Thanks
ThemeNectar Support Team
Thank you.
No more gaps for sure. But the image looks too big vertically. Can it fit better with additional/different code? I wanted it to fit the size of the browser window vertically. What is the perfect size for an image used here?
Hey Again,
Unfortunately the image cant be adjusted perfectly for both desktop and mobile . The css provided earlier was just a hack and the image would look big since you want that row to expand to the Browser Height .
Try adjusting the value below to experiment :
@media only screen and (max-width: 690px) { .full-page-inner-wrap[data-name="home"] { height: 89vh; } }
Bes.t
ThemeNectar Support Team
Much better. I like it. Thank you so much for your prompt and helpful reply!! I see why there are so many great reviews and comments about Support and well as the themes.
I appreciate you!
Just a thought...will the template updates overwrite this code that I've used?
Hi cburn,
Apologies for the late reply.
Adding the CSS to the salient options panel i.e. salient \ general settings - css script related - custom css code will preserve it over theme updates since that data is kept in the database.
If you are adding the CSS to the theme files then use a child theme as and update will wipe out those changes.
Hope this clears things up.
Hi,
I have a grey gap appearing between the MENU and my FIRST ROW when at tablet or mobile size.
https://www.drsau.com/products/saf-tehnika/integra/
These pages do not have a Nectar Slider and the first row is set to Full Width Background.
I've tried adding the code below, but it hasn't removed the gap.
Is there something else I can try?
Thanks!
Shane
Hey Again,
Try turning off the Header Resize Option and check : http://prntscr.com/iogd1q .
B.st
ThemeNectar Support Team
Thanks very much Tahir!
That worked perfectly :-)