On a few pages, I like to use a black background for my elements and not my default; clear (white). However, when there is only a little page content, I sometimes end up with empty white space until my footer (also in black) appears at the bottom. How do I avoid this? Can I add a background color to a specific page, or can I use a custom CSS to remove the space/add color?
We can use the page ID in the CSS selector to target that page only.
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):
To assist you better, we'd love to have a closer look at your setup and to do this, we'll need admin login credentials
(dashboard URL, username, password) to your site. This will enable us to conduct a more in-depth investigation of the issue based on your specific configurations. Would you mind sharing this with us?
Hi Team,
On a few pages, I like to use a black background for my elements and not my default; clear (white). However,
when there is only a little page content, I sometimes end up with empty white space until my footer (also in
black) appears at the bottom.
How do I avoid this? Can I add a background color to a specific page, or can I use a custom CSS to remove
the space/add color?
Hey Again,
Please provide the page URL so we can write up CSS for that particular page only .
Thanks.
ThemeNectar Support Team
Hey Again,
We can use the page ID in the CSS selector to target that page only.
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):
.page-id-1617 .container-wrap { background: #000 !important; } .page-id-1617 .nectar-global-section.before-footer{ background: #000 !important; }Thanks
ThemeNectar Support Team
Thank you this worked!
Hi Dan,
Thanks for writing back.
I am not seeing any white spaces below the footer. Please let me know whether I am overlooking something, I will be happy to revisit it.
I look forward to hearing from you.
Best Regards.
Hello Dan,
Thanks for writing back.
To assist you better, we'd love to have a closer look at your setup and to do this, we'll need admin login credentials
(dashboard URL, username, password) to your site. This will enable us to conduct a more in-depth investigation of the issue based on your specific configurations. Would you mind sharing this with us?
If you prefer, you can safely share the access through a one-time secret note or using an access plugin such as Controlled Admin Access.
Before you provide this information, we strongly recommend taking a backup of your site.
If you have any concerns or questions about this process, please don't hesitate to let me know.
Best regards,
Hey Again,
I am afraid there is no such Sticky Footer Feature available in Salient which would keep the footer to the bottom if the content is not high enough.
You can try using the "Footer Reveal" Feature and check:
Thanks.
ThemeNectar Support Team