[Resolved] Making the last list item on the sidebar widget to margin-bottom to 0

[Huseyin]

Hi Team,

I’m stuck with CSS with Sidebar Widgets (Recent posts & Categories). How can I get the last item on the list to have a margin-bottom of zero value (so the list looks visible nice, seems that there’s extra padding on the widget)? (i have tried before writing this ticket, I think the last item is called last-child)

This is the CSS for Sidebar Widgets

.right-sidebar .widget-title {
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 9%;
		text-transform: none;
}
.right-sidebar #recent-posts-2 ul li {
    border-bottom: dotted 1px #C0B2CA;
    margin-bottom: 5%;
    padding-bottom: 5%;
	  font-size: 15px;
		font-weight: 500;
}
.right-sidebar #categories-2 { 
	background-color: #FFF1E5;
	color: #fff;
	border-right: 2px solid rgba(0, 0, 0, 0.03);
	border-bottom: 2px solid rgba(0, 0, 0, 0.03);
	box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}
.right-sidebar #categories-2  ul li {
	  font-size: 15px;
		font-weight: 500;
	  border-bottom: dotted 1px #C0B2CA;
    margin-bottom: 5%;
    padding-bottom: 5%;
}
li.cat-item.cat-item-159,
li.cat-item.cat-item-158, 
li.cat-item.cat-item-160{
  display: none;
}

[Huseyin]

please check the screenshot
https://ibb.co/5FC7mg2

[David]

Hi there,

you can try reducing the bottom padding in Customizer > Layout > Sidebar to reduce that space.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Huseyin]

I know but, when it’s a recent post list widget the spacing on Customizer > Layout > Sidebar gets ingorned.

[David]

That spacing is coming from the bottom margin you have added in this CSS:

.right-sidebar #recent-posts-2 ul li {
    border-bottom: dotted 1px #C0B2CA;
    margin-bottom: 5%;
    padding-bottom: 5%;
    font-size: 15px;
    font-weight: 500;
}

.right-sidebar #categories-2 ul li {
    font-size: 15px;
    font-weight: 500;
    border-bottom: dotted 1px #C0B2CA;
    margin-bottom: 5%;
    padding-bottom: 5%;
}

Remove that CSS and use this instead:

#right-sidebar ul li {
    border-bottom: dotted 1px #C0B2CA;
    padding-bottom: 5%;
    font-size: 15px;
    font-weight: 500;
}

#right-sidebar ul li:not(:last-child) {
    margin-bottom: 5%;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Huseyin]

Legend.

Thanks for the help, David.

Wishing you/and the GP Team Happy holidays

[David]

You’re welcome!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts