How would you go about creating a fluid, responsive grid that has a two rows, the top one with two columns (68% + 28% wide) and bottom row with one 100% wide column?
Like this:
Using Webflow I was able to do it placing two div’s next to each other, in a flex box, and another div underneath at 100% width. See example.
I have been struggling all day to make this work using CSS tools (changing element height) and Toolbox Javascript setting the elements view port height, with no luck so far. Thanks for helping out.
Make it simple if you can. Forget CSS Tools.
If doing mobile first (narrow) going up to desktop (wide) then in the element inspector set the minimum size to the starting size of each of your blocks. Check/tick the ‘Set maximum width’ and set the boxes to scale up as you need to.
If you’re designing for desktop size and attempting to shrink down for mobile then you will need to do the opposite, namely set the minimum sizes for each block. Try that and let me know how yu get on.
Thank you for you answer - no luck yet. When I resize the browser it changes the width of the groups but not the height (example video) when I set 20% min width of the blocks.
For context, I am building a desktop/tablet only view which needs to have all three groups visible, in proportion, at all times.
Any suggestions for how to scale both width and height for different screen sizes?
You are correct @renelonngren, I had not spotted you were attempting to change the height and not just width. Then CSS Tools is your answer. It does work but it acts strangely sometimes. For example, if I change an element that is inside a group and change a similar element that is not in a group they behave differently. Both change size but one stays at the new size and another immediately jumps back to what it was so you need to muck about a bit. If you want to set it up and then set the app to anyone can view and share the link here then I’ll take a look and see if I can help.
Take a look at this and see if it helps. The blocks are dynamically changing width and height using CSS Tools. One thing to note that I can’t explain is that Groups will resize and immediately jump back to their full-size unless they contain another element. That is why I have a tiny hidden Text element in each group.
For the resizing, I had to use the original size of each block and hard code that in because I don’t know of a way to get the size of an element on the fly but I don’t think this is a problem since you will know the size you make the blocks.
Thank you so much Patricia, much appreciated. 
At the end I found that when resizing blocks dynamically the elements within wouldn’t resize with them, when using jquery, do they resize in your example?
Ie, if there is a repeating group inside the group, and/or, other elements (text etc) using jquery I could only make one element resize but not the content inside.
I ran into that exact problem too. What I did was I used a conditional on the content to change font size. But, that won’t help you with an RG. I did however see an example on the forum that Jarrad posted and it showed him changing the RG size too.
Yeah, I did consider using conditions to change sizes but I have too many elements to make this a smooth solution. I went with a smaller layout for now which should be OK for most screen sizes, still a pity to no be able to do something more responsive easier (flex box, vh, % etc…)
I follow the ‘mobile first’ design approach so I design on a small screen and I find it easier to handle the responsive as the screen grows. It may just be me but it makes my life easier. I also tend not to play with height 
