Best Practice for Layout Grid spacing

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Best Practice for Layout Grid spacing

Post by Starb7 »

Hi Pablo and all

What is the ‘best practice’ for this example page; http://swainelectronics.co.uk/preview/?

In the top boxes, I have three boxes and I’d like to get the look of the top option but have a thin, 2 or 3px, gap to the left and right of the middle box. I can add a border (and that is the second set of boxes shown) but that also puts the border top, bottom and left on the left and right on the right (which you have to have to keep the heights right) which I don’t want. I can’t see a way to add a smaller gap in the middle, can you help?

I’d like to make a suggestion (and I can add this to the suggestion section) and that is to have a user defined size when creating and editing a Layout Grid, eg instead of having a slider to move the spacing, let the user enter a % value. So, in my case above, I would create 5 boxes, from the left side, box 1, would be 32%, 3%, 30%, 3% and finally 32% for the right hand box. Each section will still retain the same options as it does now, padding and so on but now have a % Width Box too. I have put a pic on the above page to help describe what I mean, sorry about the crude editing!

Cheers
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Best Practice for Layout Grid spacing

Post by Pablo »

Did you consider using margin around the boxes?
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Best Practice for Layout Grid spacing

Post by Starb7 »

Pablo wrote: Thu Apr 15, 2021 11:12 am Did you consider using margin around the boxes?
No,how do I put a margin just to the left and right of the centre box (column)? I can't see that option.

Cheers
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Best Practice for Layout Grid spacing

Post by Pablo »

You can add a margin around elements via the 'Arrange' tools or the 'Margin' tools in the context menu.
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Best Practice for Layout Grid spacing

Post by Starb7 »

Pablo wrote: Thu Apr 15, 2021 12:27 pm You can add a margin around elements via the 'Arrange' tools or the 'Margin' tools in the context menu.
Ah I see, but thats a margin on a specific element (knew about that), ie the Text element, so the column so won't work as I need to add other elements like a line into into the column. As far as I can see, unless I can put a left and right padding that applies to a 'column' and not it's content, the only option is to use the column border.

Cheers
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Best Practice for Layout Grid spacing

Post by Pablo »

You can also set padding for the column.
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Best Practice for Layout Grid spacing

Post by Starb7 »

Pablo wrote: Thu Apr 15, 2021 1:05 pm You can also set padding for the column.
That's what I thought was the right way and I tried that and couldn't get a gap in the middle! Assumed you couldn't do that so I am missing something else now :(

Cheers
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Best Practice for Layout Grid spacing

Post by Pablo »

You can set the padding for both sides of the column. For each column individually.
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Best Practice for Layout Grid spacing

Post by Starb7 »

Nope, that doesn't appear to work (for me) as I mentioned. Please look here: http://swainelectronics.co.uk/colpad/colpad.html the yellow col should have L&R padding. EDIT: replaced with the L and R boxes now having the padding as instructed further down.

I have uploaded the basic site I am converting to a dynamic one for http://swainelectronics.co.uk/ to here http://swainelectronics.co.uk/preview/ Lots of polishing and editing to do but hitting the columns hurdle :(

Cheers
Last edited by Starb7 on Thu Apr 15, 2021 3:19 pm, edited 2 times in total.
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Best Practice for Layout Grid spacing

Post by Pablo »

To create an gap between two columns, set the right padding for the left column and the left padding for the right column to the same value.
or else add margin to all the elements inside the column.

If you need future assistance then please share a demo project.
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Best Practice for Layout Grid spacing

Post by Starb7 »

Hi Pablo

As I have said, this does not work (for me) and I have tried all manner of padding options. I have put up the demo to show this. Did you mean the actual project? I have just done another and uploaded the complete project to http://supake.co.uk/testing/Column%20Padding.zip

You can view the effect of this project here: http://swainelectronics.co.uk/colpad/colpad.html but as you can see, no padding!

Cheers
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Best Practice for Layout Grid spacing

Post by Pablo »

The padding seems to work correct.

I think you misunderstand the purpose of padding. Padding affects the spacing around the content but not the background.

See also:
https://www.w3schools.com/css/css_boxmodel.asp
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Best Practice for Layout Grid spacing

Post by Starb7 »

LOL, you suggested using padding (initially you suggested Margins)... all I wanted was to put a 3px gap between some columns as per the examples given. Can it be done? I guess not?

Edit: What's really frustrating is that you have the option to add top and bottom padding but not left or right in the main setting panel :?

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

Re: Best Practice for Layout Grid spacing

Post by crispy68 »

You can add padding to each individual column on all Sides.
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Best Practice for Layout Grid spacing

Post by Starb7 »

crispy68 wrote: Thu Apr 15, 2021 3:46 pm You can add padding to each individual column on all Sides.
Hi Crispy68 , I know that but... I can't seem to get what I need and not sure I am getting this across so can you try this:

1. New Project
2. Add a Layout Grid
3. Give it 3 cols
4. Set the max width to 1024 (customer wants this)
5. Set the background colour of each col to grey
6. Put a 3px white space to the left and right of the middle Column. (not to the contents)

if you can do that... I have sort of done it with a boarder but of course that has to apply to all columns to get it to match as per the example above.

Thanks for taking the time to respond :)

Cheers
Last edited by Starb7 on Thu Apr 15, 2021 4:00 pm, edited 2 times in total.
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Best Practice for Layout Grid spacing

Post by Pablo »

The top and bottom padding is for the grid itself, not for the columns.
The gutter specifies the spacing between columns.
Each column itself also has padding.

Also, you can use nested grids to implement more advanced layouts.
And of course there are also flex grids where the global spacing can also bet set.
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Best Practice for Layout Grid spacing

Post by Starb7 »

Thanks Pablo, your help and patience, as always, is much appreciated. Cheers
User avatar
onlye
 
 
Posts: 366
Joined: Sun Jun 17, 2018 12:36 am
Location: Gluckstadt, MS USA
Contact:

Re: Best Practice for Layout Grid spacing

Post by onlye »

onlye
Gluckstadt, MS USA
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Best Practice for Layout Grid spacing

Post by Starb7 »

onlye wrote: Fri Apr 16, 2021 7:07 am Something like this?

https://www.onlye.org/postweb/starb7/
Hi Onlye, yes, like I have done but is it using a Cell Grid and are there spaces between cols? I have done something to get what I wanted (as per the links) but if you have managed to get the 'small gap' to work, I'd like to know how :)

Thanks for responding.

Cheers
User avatar
onlye
 
 
Posts: 366
Joined: Sun Jun 17, 2018 12:36 am
Location: Gluckstadt, MS USA
Contact:

Re: Best Practice for Layout Grid spacing

Post by onlye »

Starb7 wrote: Fri Apr 16, 2021 7:43 am
onlye wrote: Fri Apr 16, 2021 7:07 am Something like this?

https://www.onlye.org/postweb/starb7/
Hi Onlye, yes, like I have done but is it using a Cell Grid and are there spaces between cols? I have done something to get what I wanted (as per the links) but if you have managed to get the 'small gap' to work, I'd like to know how :)

Thanks for responding.

Cheers
I used a layout grid with 3 columns. I used cards for the objects (one in each column). I added padding to each of the columns. You can use that to adjust how big the gap is. I also added some margins above and below the cards so that you get a gap when they hit the breakpoint and stack. I saved the file here if you want to look at it (file name is starb7.wbs)

http://onlyemkt.com/wwbforum/
onlye
Gluckstadt, MS USA
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Best Practice for Layout Grid spacing

Post by Starb7 »

onlye wrote: Fri Apr 16, 2021 3:21 pm
Starb7 wrote: Fri Apr 16, 2021 7:43 am
onlye wrote: Fri Apr 16, 2021 7:07 am Something like this?

https://www.onlye.org/postweb/starb7/
Hi Onlye, yes, like I have done but is it using a Cell Grid and are there spaces between cols? I have done something to get what I wanted (as per the links) but if you have managed to get the 'small gap' to work, I'd like to know how :)

Thanks for responding.

Cheers
I used a layout grid with 3 columns. I used cards for the objects (one in each column). I added padding to each of the columns. You can use that to adjust how big the gap is. I also added some margins above and below the cards so that you get a gap when they hit the breakpoint and stack. I saved the file here if you want to look at it (file name is starb7.wbs)

http://onlyemkt.com/wwbforum/
Hi Onlye, yes that works well and thanks for the project. Using a card to create the coloured background gets around the problem/issue (not a bug?) where the gap cannot be seen if the columns background property is set to solid. Thanks for the Card Hint, they look useful! Cheers
Post Reply