Last widget is not sticky but all required CSS are added

Resolved

(@liamtrng)

The last widget is not sticky, even though I’ve already added all required CSS that I can find on the internet. I have 3 widgets on the right sidebar for every single post.

@media (min-width: 769px) {
	
	.single .site-content, #right-sidebar {
		display: flex;
	}
	
	.inside-right-sidebar {
		height: 100%;
	}
	
	.inside-right-sidebar aside {
		height: 33.33%;
	}
	
	.inside-right-sidebar aside:first-child, .inside-right-sidebar aside:nth-child(2), .inside-right-sidebar aside:last-child {
		position: -webkit-sticky;
		position: sticky;
		top: 20px;
		background-color: transparent;
  }
}

This topic was modified 2 years, 10 months ago by liamtrng.

The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

David
(@diggeddy)

2 years, 10 months ago

Hi there,

i just checked the site and all 3 widgets are sticky. Did you resolve the issue ?
Thread Starter liamtrng
(@liamtrng)

2 years, 10 months ago
I replaced the code above with this code.
```
@media (min-width: 769px) {
	
	.inside-right-sidebar {
		height: 100%;
	}
	
	.inside-right-sidebar aside {
		height: 33.33%;
	}
	
	.inside-right-sidebar aside:last-child {
		height: 350px;
	}
	
	.inside-right-sidebar aside:first-child, .inside-right-sidebar aside:nth-child(2), .inside-right-sidebar aside:last-child {
		position: -webkit-sticky;
		position: sticky;
		top: 20px;
		background-color: transparent;
  }
}
```
I removed `.single .site-content, #right-sidebar {
display: flex;
}`

and added `.inside-right-sidebar aside:last-child {
height: 350px;
}`

But I still don’t understand why setting height for aside:last-child to 350px (or any percentage lower than 33.33%) did the trick.
- This reply was modified 2 years, 10 months ago by liamtrng.
- This reply was modified 2 years, 10 months ago by liamtrng.
Elvin
(@ejcabquina)

2 years, 10 months ago

Hi there,

That did the trick because you won’t notice the widgets being sticky if all the widget’s actual containers stretch to fill the whole height of their container.

If the whole height is fully occupied, there’s no place left to move to show the widgets being “sticky”. Having set 350px means there’s 33.33% – 350px worth of horizontal space left to move for the widgets to show they’re actually “sticky”.
Thread Starter liamtrng
(@liamtrng)

2 years, 10 months ago
But in the old code I have this line
```
.inside-right-sidebar aside {
		height: 33.33%;
	}
```
So logically, the last aside child should also have 33.33% height left to stick along. I also set the .inside-right-sidebar height to 100% (which is the parent container of all aside tags). But doing these doesn’t make the last widget stick.

Setting aside:last-child’s height to anything lower than 33.33% will make it stick (right now I am setting its height to 350px, but I can even set it to 0 and it will also stick). That’s what makes me confused.
David
(@diggeddy)

2 years, 10 months ago

When a sticky element eg. .inside-right-sidebar aside makes contact with the bottom of its parent container ie. .inside-right-sidebar then normal scrolling resumes.

By giving that last element a 33% height it fills the remaining space in the parent container, and is therefore always making contact with the bottom of the parent container.

You don’t need to give the last element any height – instead just set it to height: auto;

Thread Starter liamtrng
(@liamtrng)

2 years, 10 months ago

Thank you for your support. I will now mark this as resolved.

David
(@diggeddy)

2 years, 10 months ago

Glad we could be of help

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Last widget is not sticky but all required CSS are added’ is closed to new replies.