Archived topic

help with 'extending' grid in 'freelance' site library template

5 replies · Started by Thomas on February 28, 2022

Viewing posts 1–6 of 6

February 28, 2022 at 11:30 am #2137003

Hello,

I am using 'freelance' site library template. I 've been trying without success to further 'expand' the grid which already exists in the 'projects' page. It initially has 6 'container' blocks (which show in two columns on large screens). All I want to do, is to expand this grid, i.e. add a few more 'rows' if you see what I mean, ideally with similar attributes (margins, paddings, all basic settings really).

So I have this initially (large screens):

Text Pic
Pic Text
Text Pic

And I want to come up with something like:

Text Pic
Pic Text
Text Pic
Pic Text
Text Pic
Pic Text
.....

I hope you understand what I mean by this crude sketch.

I would like to do it in an easy way, hopefully by copying/pasting, or duplicating rather, basically in order to keep all basic style settings similar (margins, paddings, breakpoints, whatever).

I just want to 'expand' the current grid with more similar "rows", i.e. containers.

I 've read documentation and searched support forum, and also tried various combinations of duplications/moving with the block editor, but something breaks every time and the style of additional 'rows' breaks ..

Which is the right way to do it?

Sorry for the length of this message, I 've been trying for quite some time without success...

February 28, 2022 at 4:14 pm #2137173

Hi Thomas,

You can simply select the container block then click the+ button to duplicate the container.

I shot a small clip for you:
https://www.screencast.com/t/vBC1cUbf

Let me know if this helps :)

March 1, 2022 at 1:59 am #2137533

Thanks for your prompt reply!

So easy .. I feel a bit stupid :) .. I was duplicating the container via the list on the left, and it seemed to put it outside (after) the grid... Anyway, thanks again, and sorry for this question, I realize it was far too easy!

Just another short question before closing this thread - it duplicates ok, but it seems to not keep the same vertical spacing when adding new containers. I checked the 'spacing' attributes and they all seem the same (as they should be, since duplication surely keeps all these settings). However, new containers (forming new 'rows' in a sense) seem to not have any spacing. Do you know how I could keep this uniform?

I tried to record a small screencast to explain what I mean.

Thanks for your awesome support!

March 1, 2022 at 2:10 am #2137545

Hi Thomas,

As far as CSS is concerned, they GB Container Blocks 1st to 4th does seem to have the exact padding values. Only 5th and 6th didn't have padding bottom.

By "vertical spacing" perhaps you're pertaining to the Vertical Alignment setting of the Grid block.

Can you try changing its dropdown value from center to top or default?

March 1, 2022 at 12:25 pm #2138514

Hello,

thanks again for your prompt reply. By "vertical spacing" I meant the vertical spacing between the containers - actually, the vertical padding/margin between each 'pair' of containers eventually forming a kind of 'row' (at least in big screens).

It doesn't have to do with the vertical alignment setting of the grid itself. I understand it's kind of difficult to explain in words, and English is not my mother tongue, so bear with me. I will try with a sketch :)

If I make a crude sketch to explain it better:

initial template grid:

Text Pic
-some space-
Pic Text
-some space-
Text Pic

now if you duplicate containers to create a new 'row', the -some space- between previous 'rows' is not created and the new row is too close to the one above it, so you get:

Text Pic
-some space-
Pic Text
-some space-
Text Pic
-no space-
Pic Text /* new 'row'...*/

I am puzzled why this happens, because I check the padding/margin values for the initial containers I 'm duplicating from, and they 're all blank. I can't see where the initial space is created from.

I kind of solved it, by adding a 120px margin-top on the last containers, but I suppose there should be a better, more consistent way, so that each new 'row' has identical "vertical spacing" (margin+padding) like the ones before . I hope you understand what I 'm trying to explain .. Sorry for the length of the message!

March 1, 2022 at 2:43 pm #2138649

Hi Thomas,

Can you check if the containers have the remove vertical gap option enabled?
https://docs.generateblocks.com/article/container-overview/#remove-vertical-gap

Let me know :)

This archived topic is closed to new replies.

Start building better websites today.