Equal height content and sidebar

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 :)

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.

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.

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.

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;
	}