Spacing

Hi Peak,

You're using a WordPress Block for that section. There was an update in WordPress that removed some default stylings.

What we recommend is to use a GenerateBlocks Grid Block to prevent this from happening. Reference: https://docs.generateblocks.com/article/grid-overview/

You can also try adding this through Appearance > Customize > Additional CSS:

.is-layout-flex.wp-container-12.wp-block-columns .is-layout-flow.wp-block-column .wp-block-image {
    margin-bottom: 10px;
}

Same problem with GB Grid Block. When you select 3 column grid block the horizontal spacing is fine, but when you add another 3 columns below those, there is no vertical spacing, despite vertical gap being set, and visible, in the editor.

Is it not possible to create multi-line grids straight away? E.g. insert a 3 x 3 grid?

If not please advise how to solve the spacing issue here without extra code as it should be achievable by default.

Thanks.

Hi there,

don't use multiple grids.
If you continue to add 33% wide grid item containers to a single grid, then it will automatically add new rows for you.

See here for duplicating in the grid to add more grid items:

https://docs.generateblocks.com/article/grid-overview/

This didn't solve the spacing issue; items still sitting flush on top of each other. Thanks.

This didn’t solve the spacing issue; items still sitting flush on top of each other. Thanks.

Are all the containers within the same Grid?

If so, have you set a vertical gap for the Grid?

Can you share a link to the section where we can see the Grid?

- yes
- yes, top and bottom padding
- added in private

Can you provide the login link as well?

done, thanks

Oh you are still using the columns block which is a WP block, we have no control over it.

Can you try using the Grid block of GenerateBlocks?

I noticed that you created the Column use a structure like this:

- column 1 
  -- image
  -- image 
  -- image
  -- image

- column 2
  -- image
  -- image 
  -- image
  -- image

- column 3
  -- image
  -- image 
  -- image
  -- image

I would recommend using 1 single Grid for your layout if you switch to GB's Grid block.

- Grid
  -- container 
    --- image
  -- container 
    --- image
  -- container 
    --- image
  -- container 
    --- image

I've shot a small clip for your reference:
https://www.screencast.com/t/qXo2DU1OE60z

I am using Grid block of GenerateBlocks. Maybe you are viewing the bottom 'genres' section instead of the top one?

I think I have followed your instructions but still no vertical spacing. (I don't know how to show 'list view' as you have on the left sidebar though.)

If I am getting it wrong please screencast step by step instructions from scratch.

Many thanks

Just occurred to me that I have been working on draft so you probably didn't see my work at all! I've created a draft copy of the page so you can see my work on the top 'genres' section.

I hope you don't mind, but on that page i copied your grid to the top of the page, and changed it to the correct layout.

Thanks but this doesn't show me how to do it. Can you kindly provide step-by-step instructions so I can do this myself (saves having to ask you each time!) thanks

Ok, if thats what you wanted then do the following:

1. Add a Grid Block, in: Choose how many Containers to start with. select 1 container.
2. Set the Grid Blocks Vertical and Horizontal spacing.
3. Select the single grid item Container and set its width to 33%
4. Make any style changes to the container, and add whatever blocks you need inside.
5. With that Container still selected in the Blocks Toolbar click Duplicate Grid Item - see here:

https://docs.generateblocks.com/article/grid-overview/#duplicate-grid-item

Click that as many times as you need eg. 8 times.