Layout Grid Breakpoint and Stack

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
User avatar
protectourlands
 
 
Posts: 443
Joined: Sat May 24, 2008 2:16 am
Contact:

Layout Grid Breakpoint and Stack

Post by protectourlands »

I am using a layout grid with 4 columns containing images. Image 1 and 2 are the same width. Image 3 and 4 are 1/2 the width of image 1 or 2, so the column layout is

4x 4x 2x 2x (1 row)

At the Layout Grid breakpoint I would like the following stack to happen so I end up with 3 rows:

4x
4x
2x 2x

Is this possible in Layout Grid?
User avatar
Pablo
 
Posts: 21569
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Layout Grid Breakpoint and Stack

Post by Pablo »

You can use the 'overflow' option to do this.

Related tutorial:
http://wysiwygwebbuilder.com/layoutgrid_advanced.html
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Layout Grid Breakpoint and Stack

Post by crispy68 »

Set overflow to 'custom'.

In the breakpoint, under columns click 'remove' to make only 2 columns and set both to 6x. Click on 'settings' under overflow and set columns 3 and 4 to 6x.
User avatar
protectourlands
 
 
Posts: 443
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Layout Grid Breakpoint and Stack

Post by protectourlands »

This makes sense. Thank you for responding.

I have tried this and it works exactly as I hoped at the breakpoint, but now the default view is also wrapping into 2 rows. I must be missing something. I have tried many things to correct this. Do I need to adjust the value in the Layout Grid > Miscellaneous > Breakpoint? What should that be if the project breakpoint is 480?

The grid in default shows the 4 columns in the manager and then shows the two 6x in the breakpoint manager. Everything in the grid manager looks the way it is supposed to.

Thank you for your help.
User avatar
protectourlands
 
 
Posts: 443
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Layout Grid Breakpoint and Stack

Post by protectourlands »

Correction: It seems to be working fine in default, but is breaking into 2 rows way before the 480 breakpoint. It must be something in the grid manager breakpoint setting I am missing.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Layout Grid Breakpoint and Stack

Post by crispy68 »

how many breakpoints do you have? Are you using 'use min-width' for breakpoints?

if you are only using 2 breakpoints and 'min-width' then the grid is going to switch way before it reaches the 480 BP. It will switch the second the width is below your default width. You will need to add another BP below the 480 breakpoint so it switches at 480.
User avatar
protectourlands
 
 
Posts: 443
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Layout Grid Breakpoint and Stack

Post by protectourlands »

Yes thank you. It was the min-width setting. I really appreciate your help. It is working perfectly now.
User avatar
protectourlands
 
 
Posts: 443
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Layout Grid Breakpoint and Stack

Post by protectourlands »

Here is a link to the demo page utilizing the grid and the stacking you both helped me figure out. I cannot thank you enough for taking the time to assist me in getting it resolved.

http://www.peacefulnesttulum.com
Last edited by protectourlands on Thu Jun 27, 2019 1:09 pm, edited 2 times in total.
User avatar
Pablo
 
Posts: 21569
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Layout Grid Breakpoint and Stack

Post by Pablo »

It looks great!
Post Reply