Layout Grid and Five Columns

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: 513
Joined: Sat May 24, 2008 2:16 am
Contact:

Layout Grid and Five Columns

Post by protectourlands » Mon Nov 04, 2019 10:46 pm

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

User avatar
crispy68
 
 
Posts: 1398
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Layout Grid and Five Columns

Post by crispy68 » Tue Nov 05, 2019 12:04 am

You could do:
1 - 2 - 2 - 2 - 2 - 2 - 1

Also depends on exactly what you are putting in the grid.

User avatar
protectourlands
 
 
Posts: 513
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Layout Grid and Five Columns

Post by protectourlands » Tue Nov 05, 2019 12:21 am

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?

User avatar
crispy68
 
 
Posts: 1398
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Layout Grid and Five Columns

Post by crispy68 » Tue Nov 05, 2019 12:29 am

When it goes to stacked mode, select that column and uncheck 'visible'. This will hide that column.

User avatar
protectourlands
 
 
Posts: 513
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Layout Grid and Five Columns

Post by protectourlands » Tue Nov 05, 2019 12:38 am

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.

User avatar
crispy68
 
 
Posts: 1398
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Layout Grid and Five Columns

Post by crispy68 » Tue Nov 05, 2019 12:48 am

I'm a bit confused. You said
but when I stack the columns the first column is blank in the first row.
This is correct as when it is stacked it becomes:
1
2
2
2
2
1

Once in stacked mode the widths are all the same and the numbers 1 & 2 mean nothing anymore.

Do the 5 columns have to always be 5 across when horizontal in 1 row? Can you have multiple rows? Need more info on what you are trying to do. What is actually in the columns?

User avatar
crispy68
 
 
Posts: 1398
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Layout Grid and Five Columns

Post by crispy68 » Tue Nov 05, 2019 12:55 am

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

User avatar
protectourlands
 
 
Posts: 513
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Layout Grid and Five Columns

Post by protectourlands » Tue Nov 05, 2019 12:58 am

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 to overlap, so I need a breakpoint there. At that breakpoint I am trying to get 3 images in the first row, then the other 2 on the second row. Then at 480 I need 2/2/1, then at 320 I need 1/1/1/1/1

I have tried everything and run into a different issue as I resolve one. One issue is, when you create multiple rows with the overflow custom settings, you cannot set the new rows to center. Only the top rows.

I hope this makes sense. I am beginning to believe what i am looking to do cannot be done.

User avatar
protectourlands
 
 
Posts: 513
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Layout Grid and Five Columns

Post by protectourlands » Tue Nov 05, 2019 1:00 am

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.

User avatar
crispy68
 
 
Posts: 1398
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Layout Grid and Five Columns

Post by crispy68 » Tue Nov 05, 2019 1:19 am

I've made a quick demo project.

download here: https://www.wizbangwebdesign.com/demo/grid.zip

You may have to play around with the breakpoints, etc. to get it to fit your design.

User avatar
protectourlands
 
 
Posts: 513
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Layout Grid and Five Columns

Post by protectourlands » Tue Nov 05, 2019 1:52 am

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.

User avatar
protectourlands
 
 
Posts: 513
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Layout Grid and Five Columns

Post by protectourlands » Tue Nov 05, 2019 3:41 am

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.

User avatar
crispy68
 
 
Posts: 1398
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Layout Grid and Five Columns

Post by crispy68 » Tue Nov 05, 2019 3:46 am

Depending on what you mean by stacking(when it goes to 3 -2 or when the grids become a column), for padding you have a possible few options:
1. Add padding to object
2. Add margin to object
3. Add inner padding to the column on bottom

User avatar
protectourlands
 
 
Posts: 513
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Layout Grid and Five Columns

Post by protectourlands » Tue Nov 05, 2019 3:57 am

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.

User avatar
protectourlands
 
 
Posts: 513
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Layout Grid and Five Columns

Post by protectourlands » Wed Nov 06, 2019 4:52 pm

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.

Post Reply