Archived topic
Remove white space above and below sidebar.
6 replies · Started by Brigitta on March 1, 2022
Hi there. I've attached the link in the private section below, but, how do I remove the white space above and below the sidebar without adjusting the page/content padding? Currently, I am using the following custom css code for the sidebar:
/* START SIDEBAR */
@media(min-width: 769px) {
#right-sidebar {
background: #f1f1f1 !important;
min-height: 100%;
display: flex;
margin: 0;
}
.right-sidebar .site-content {
display: flex;
}
}
.separate-containers .inside-right-sidebar {
background-color: #f1f1f1 !important;
}
/* END SIDEBAR */
Hi there,
Do you want something like this?
https://www.screencast.com/t/jElIlUjqJ1m
If so, you can try this CSS:
@media (max-width: 768px) {
#right-sidebar {
margin-top: -100px;
}
}Let me know :)
Hello Ying.
Unfortunately, that does not work. Remember, I also need to account for the white space at the bottom. Also, I used the exact same template for the another site, but can't recall how I addressed it. That site is listed below.
Hello?
Hi there,
Try this CSS:
@media(min-width: 769px) {
.right-sidebar #content {
padding-top: 0;
padding-bottom: 0;
}
.right-sidebar #content .content-area,
.right-sidebar #content #right-sidebar {
padding-top: 100px;
padding-bottom: 20px;
}
}This is simply removing the Container Top and Bottom Padding ( as set in Customizer > Layout > Container ) for any page with the right sidebar ( on Desktop ) and then add that padding back inside the content area and the sidebar.
Excellent - Thank you Dave.
You're welcome
