Flexgrid - How to Match Workspace With Preview

[Base12]

I am trying to get my Flex Grid to look the same in the Workspace as it does in the Browser Preview.

Here is what my project looks like in the Workspace...



Here is what my project looks like in the Browser Preview...



The upper Flex Grid has 3 columns and 1 row...



The lower Flex Grid has 10 columns and 1 row...



The goal is to make sure that the text never goes past 800 pixels wide.

I had to split the lower Flex Grid into enough columns to make it 100% WYSIWYG.

There seems to be some sort of default setting that treats all of the columns as an equal percentage of the overall width of the Flex Grid when viewing in the Workspace.

Thus, the upper Flex Grid has its three columns defaulting to 33.3% each in the Workspace.

The lower Flex Grid has its ten columns defaulting to 10% each in the Workspace.

My question is this...

Is there a way to avoid splitting the columns in the lower Flex Grid to make it WYSIWYG in the Workspace?

Here is the demo project...

https://www.mostholyplace.org/misc/test ... review.wbs

Thanks!

[Pablo]

To be honest, I am not sure what the correct behavior should be for minmax(0px, 800px).
Because the minimum size is set to 0px and max 800, the workspace just treats it like 1fr until it reaches 800.

[wwonderfull]

layout grids have the best moduler approach. Trying to do everything with flexgrid may add complexity and a fixed width for anything may not be a logical approach because responsive design is a variable subject which can not be set to a fixed layout adjustment.

[Base12]

To be honest, I am not sure what the correct behavior should be for minmax(0px, 800px).
Because the minimum size is set to 0px and max 800, the workspace just treats it like 1fr until it reaches 800.

That makes sense because when I set the page width to 3000 pixels wide or higher, the lower Flex Grid width stretches to the max and matches the upper Flex Grid.

This is the workaround I am using now.

[Base12]

layout grids have the best moduler approach. Trying to do everything with flexgrid may add complexity and a fixed width for anything may not be a logical approach because responsive design is a variable subject which can not be set to a fixed layout adjustment.

Thanks wwonderfull. Good advice. I will experiment with some Layout Grids today.

[onlye]

layout grids have the best moduler approach. Trying to do everything with flexgrid may add complexity and a fixed width for anything may not be a logical approach because responsive design is a variable subject which can not be set to a fixed layout adjustment.

Thanks wwonderfull. Good advice. I will experiment with some Layout Grids today.

I have been reading your posts and questions, and it seems that you are overcomplicating the building of your website. Quick exercise: go back and use layout grids. If you want to keep the text smaller than 800px, just set the max size to 800px in the layout grid properties. You don't even need multiple columns. When I first started with Wizzy I thought I needed to design with flexgrid. I now do most design with layout grids and a few flexgrids for specific task.
Best of luck and enjoy watching your progress.

[Base12]

Sounds good onlye. I definitely want to get the foundation optimized before I make hundreds of pages.

[Base12]

OK, so I tried using Layout Grid and I now remember the issue I had with it.

Here is the test page...

https://www.mostholyplace.org/misc/test ... restaurant

Here is the demo project...

https://www.mostholyplace.org/misc/test ... aurant.wbs

On a PC screen that is maximized, things look pretty good...



However, when the browser width begins to shrink, the gradient on the Flex grid (upper) responds first, leaving the text intact. That is what I want.

The Layout Grid (lower) unfortunately responds equally across the entire width, which is what I do not want...



I want the gradient to shrink first, then disappear altogether.

This is what the page would look like when shrunk down even further...



See the problem?

The Layout Grid does not appear to have the bells and whistles required to make it responsive in the way I would like.

[crispy68]

Layout grids and Flexgrids are different from each other.

Layout grids are based on 12 columns using percentages.

In Flexgrid, you can mix and match widths (fr, px, %). So in some cases 1 might be better than the other depending on what you want it to look like.

So in your example, in the flexgrid, you have the text with a max-width of 800px so it stays 800px the entire time while the 2 side split up the remaining space (reason for using 1fr). Once 800px, then you only see the text and it wraps accordingly. You dont see the sides because there is no remaining space for them.

In the grid, since you have it set up as 3x 6x 3x, this means the 1st and 3rd column are 25% of the width of the screen and the center is 50%. That means your text is always 50% of the screen width and changes as the screen is decreased or increased. There is no way to make columns 1 and 3 shrink and shrink until they are gone because they are always 25% width.

[Base12]

Right on Crispy68. That was a really good explanation. I appreciate it.