www.wysiwygwebbuilder.com

I have been experimenting with Flex Grid and must agree with Pablo - this is likely the future in responsive page layout. Amazing! I have a page currently structured with Layout Grid and floating layers. I need one of the rows of content to change the order of the rows when stacked from multiple col...

OK I waked away and came back to it with a fresh look and was able to use the column padding to get the desired spacing. My guess is I was applying it to the wrong breakpoint when I last tried it. I removed the transparent shapes. All set now. Thank you again.

Unfortunately it was a button from a shape so padding it was not an option in the manager. For some reason padding the columns didn't work either. not sure how to add margin to an object. Nonetheless the transparent shape did the trick. I could not be happier with the result. Thank you again.

Worked like a charm crispy68

There was no way to pad the bottoms after the stacking to keep them spaced apart so I used a css3 shape transparent to build space. Everything looks great. Thank you again for taking the time to walk me through this method.

Wow this is exactly what I am trying to do. I never thought of putting grids inside of a grid. I'll have to study this. Thank you so much for taking the time to make this demo. This really opens up the possibilities.

If they can break to multiple rows while horizontal before it goes to stacked mode then I believe I have an answer.

Yes I think that is what I am trying to do.

Thank you Crispy68 I have 5 images with text below them, then a button below the text. The columns are set to center. By "stacked" I meant wrapped, as in using the overflow custom settings to get 3 columns in the first row and 2 columns in the second row At about 768 the columns get tight and begin ...

Yes but it changes the width of the other columns in that row, throwing off the alignment on the stack.

The 1,2,2,2,2,1 becomes 4,4,4 with overflow custom. So I need 3 column in the first row and 2 columns in the second row. I m really struggling with this. I appreciate your advice.

I tried that first, but when I stack the columns the first column is blank in the first row.

Is there a way to make that column invisible without affecting the widths of the other columns?

What is the best way to make 5 columns equal width in Layout Grid?

I even tried directly editing the CSS after publish and that did not work either.

Changed to No worries. I changed the format to "cover" so the height stays the same.

I really appreciate the time you took to look at this Pablo.

I added it to the floating layer Object HTML > Custom style The resulting code is <div id="Layer1" style="position:relative;text-align:center;width:100%;height:442px;float:left;clear:left;height: auto !important;"> <div id="Layer1_Container" style="width:1650px;height:442px;position:relative;margin-...

Unfortunately that didn't work. Thank you for explaining all this though. I'll try a different design.

All the best to you

This has nothing to do with the layout grid. Exactly and this is what I have discovered. It is the fixed height of the layer that is keeping the grid from floating upward. If you need a flexible height then you can override the height with custom code. Can I do this in the Object HTML > Custom Style?

Hi Pablo Unfortunately the grid is not floating to the varying layer height. It doesn't because I believe the floating layer sets a fixed height even though it is set to "contain". Here is the html generated for the layer: <div id="topimage" style="position:relative;text-align:center;width:100%;heig...