Streaming live at 10am (PST)

Mobile 3 row question


#1

Working on a mobile portrait orientation....I want to divide the screen into 3 rows, totally 100% in height....so I add 1 section and 3 containers on top of each other.

Now the problem. I want the top and bottom rows to be about 20% height each, and the middle 60%. Kind of like a header that always stays at the top, with a middle, and bottom. All would of course stretch when the device is rotated.

I can't seem to figure out how to do this?

Could someone point me in the right direction?

Thanks!


#2
<script>
	$(document).ready(function() {
		var top = $(window).height()*0.2;
		var middle = $(window).height()*0.6;
		var bottom = top;
		$('.top-section').css('height', top);
		$('.middle-section').css('height', middle);
		$('.bottom-section').css('height', bottom);
	});
	$(window).resize(function() {
		var top = $(window).height()*0.2;
		var middle = $(window).height()*0.6;
		var bottom = top;
		$('.top-section').css('height', top);
		$('.middle-section').css('height', middle);
		$('.bottom-section').css('height', bottom);
	});
</script>

You are very welcome.


#3

Thanks for the code...

So there is no way to do this inherently within Webflow, I have to use jQuery?


#4

To be honest I have no idea... That is the best way for me to stay responsive smile


#5