Mobile 3 row question

Design help General
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!

1 Like
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.

1 Like
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 :slight_smile: