Quick question on layout grid

alan_sh · Post by **alan_sh** » Thu Nov 18, 2021 3:03 pm

In my new sites, I'm making extensive use of layour grids. Generally, I have the set up as 3,6,3 where the two 3's (at the side) hold supplementary information and the '6' in the middle holds the main information.

This works lovely until the breakpoint - at which time, the left hand '3' goes on top, the '6' goes in the middle and the right hand '3' goes on the bottom. This generally spoils what I am trying to do.

So, my question - is there any way that at the breakpoint, the middle section (the '6') of the layout grid can go on the top of the display and the other two below?

Cheers

Alan

crispy68 · Post by **crispy68** » Thu Nov 18, 2021 3:07 pm

Yes. You need to set the layout grid to 'flexbox' or 'css grid' for it to work. You set the order by placing a number in the order box.

You can view more info here: https://www.wysiwygwebbuilder.com/layoutgrid_part1.html under managing columns --> order.

I also did a video on this that can be viewed here: https://www.youtube.com/watch?v=o5-Wk8_7yFo

alan_sh · Post by **alan_sh** » Thu Nov 18, 2021 3:40 pm

Thanks.

The issue I have is that I only have one breakpoint for the page (default) and I am relying on the breakpoint setting of the layour grid properties to define when it will flip to vertical. It's when that happens that I want the order changing.

Here's a simple example https://www.dropbox.com/s/jkjuflc686tcc ... g.wbs?dl=1

So, is that possible?

Alan

crispy68 · Post by **crispy68** » Thu Nov 18, 2021 5:42 pm

Unfortunately that is not possible within WB. The breakpoint in the layout grid is simply the point the grid goes from horizontal to vertical (stacked). However, you need to add a breakpoint to match the layout grid breakpoint to be able to change the order.

The only other way I can think of is you are going to have to add additional CSS code to the page to possibly get it to work. I'm not at my computer to try this yet but can look at it later if you like.

alan_sh · Post by **alan_sh** » Thu Nov 18, 2021 8:34 pm

That would be great, but I think I will post it as a suggestion for a future enhancement. Of course, any help you can give will, I am sure, be appreciated.

cheers

Alan

crispy68 · Post by **crispy68** » Thu Nov 18, 2021 10:52 pm

Hey Alan,

So here is the CSS to add for your situation of: 3x 6x 3x

Open up your layout grid, make sure to set Overflow = hidden and grid system = flexbox. Then click on the first cell and type '1' in the order box, click on cell #2 and type '2', and finally click the 3rd cell and type '3' for the order.

Open an html box (or add to page html) and insert the following between the <head> tags:

Code: Select all

<style>
@media only screen and (max-width:969px){#LayoutGrid1 > .col-1{order:2;}#LayoutGrid1 > .col-2{order:1;}#LayoutGrid1 > .col-3{order:3;}}
</style>

Make sure to change the ID in the above to the ID of your layout grid and the max-width should be the same as the breakpoint in your layout grid. In this example, the 1st '3x' shifts to the 2nd position and the 2nd '3x' stays in the 3rd position. If for some reason you want the 2nd '3x' to be in the 2nd position and the 1st '3x' to be in the last position, simply change the order # in the above code.

alan_sh · Post by **alan_sh** » Fri Nov 19, 2021 2:40 pm

Thanks that works fine. The only other thing that needs to be done is that the maxwidth property needs to match the breakpoint value in the layout grid properties.

Now, if Pablo could incorporate that in a future version somehow...

Thank you for your efforts.

Alan

crispy68 · Post by **crispy68** » Fri Nov 19, 2021 2:46 pm

I have edited my previous post.

Now, if Pablo could incorporate that in a future version somehow...

It could get confusing for some. I think most users would just add a page breakpoint. I don't think many try to build a website with essentially no breakpoints like you are trying to do.

alan_sh · Post by **alan_sh** » Fri Nov 19, 2021 9:56 pm

crispy68 wrote: Fri Nov 19, 2021 2:46 pm

It could get confusing for some. I think most users would just add a page breakpoint. I don't think many try to build a website with essentially no breakpoints like you are trying to do.

It is worth the effort. I only need to change things in one place. No need to check other breakpoints any time I make a change. It's so much easier to manage than my previous attempts.

There's still a few things I have to sort out. Footers don't work properly (so I am not using them until I fix that). And, as I have found, sometimes the layout isn't quite what I expect when the size reduces. But overall, I love it.

Alan

www.wysiwygwebbuilder.com

Quick question on layout grid

Quick question on layout grid

Re: Quick question on layout grid

Re: Quick question on layout grid

Re: Quick question on layout grid

Re: Quick question on layout grid

Re: Quick question on layout grid

Re: Quick question on layout grid

Re: Quick question on layout grid

Re: Quick question on layout grid