[Resolved] Equal height content and sidebar

[Jeffrey]

Good afternoon,

I would like to make my sidebar the same height as the content is.

View post on imgur.com

Does anybody know how to do this?

Thank you very much.

Best regards,

Jeffrey

[Leo]

Hi there,

Is there a specific page I should be looking at?

The sidebar on the homepage is longer than the content:
https://www.screencast.com/t/KKeVnbhR

Let me know 🙂

[Jeffrey]

Hi Leo,

No specific page. I just want the content and sidebar to be the same height no matter the content being longer or the sidebar.

I hope you can help me with that.

Thank you.

[David]

Hi there,

give this CSS a shot:

@media (min-width: 769px) {
	.site-content {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
	}
	.homehero, .homehero2 {
		-webkit-box-flex: 1;
		    -ms-flex: 1 0 100%;
		        flex: 1 0 100%;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
	}
	#right-sidebar {
		background-color: #fff;
	}
}

Just need to be mindful of elements being hooked into the content, like the homeheros will be effected by the flex. You may want to look at using the Element Header or a before_content hook for those elements.

[Jeffrey]

Hi David,

Thank you very much for helping. Your solution is working and i’ve put the heros inside a after_header hook now.

Great support! thanks.

[David]

Thats great you can remove this CSS:

.homehero, .homehero2 {
		-webkit-box-flex: 1;
		    -ms-flex: 1 0 100%;
		        flex: 1 0 100%;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
	}

[Author]

Posts