Stretch to Max Width

[boston85719]

Thanks for all the input guys. I have come across some pretty useful forum threads that shed light onto the topic in an interesting way.

First thing I found was a thread:

Setting a group to be % of viewport height dynamically

@khabazkameel + @jason1 + @hi1, here is a method that does the trick. The setup: [image] JS on page load: $(document).ready(function(){ $("#white-1").css("height","100vh"); $("#yellow-2").css("transform","translateY(100vh)"); $("#yellow-2").css("height","100vh"); $("#main-page").css("height","200vh"); }); JS on page resize: <script> $(window).resize(function(){ $(".main-page").css("height","200vh"); }); </script> Page: https://testingenvironment.bubbleapps.io/version-test/full-height-…

It had a post from @Lucien with a link to his editor (awesome examples)

Bubble Editor - testingenvironment

With this it seems possible to stretch the height of elements according to the view port height.

To find the actual value of the view port height I found through the above thread another thread with a great bit from @dambusmedia

Get viewport Height in pixels using javescript and css

Add a “Javascript to Bubble” element to your page, from the ToolBox plugin. Give it a suffix in its property, say “h”. Then add a workflow item to run javascript on page load. In this javascript code add your code that gets the viewport height, and return it to the “Javascript to Bubble” element using bubble_fn_suffix(var). Here’s an example (I grabbed the viewport height code off some page and have not tested it): var viewportHeight = Math.max(document.documentElement.clientHeight, window.inn…

Combining these I am able to dynamically change the height of elements to fit a larger view port height on page load using a conditional in the workflow on page load.

This is a strategy I will be using tomorrow (spent the last 12 hours searching, learning, testing, failing and then finally succeeding at some things) to be able to not only responsively design for the width but also the view port using the same elements on the page and not needing to have too many elements on page.