[Support request] New GB flex stacking

[SLIM]

I for the life of me cannot figure out, how to create GenerateBlocks containers with the new setup.

So I’m setting up a container with display flex. I setup the sizing. ,My page is set to a full width setup. I have a main container setup as a block and the inner container as flex.

If I enable wrap it instantly stacks, despite having the subcontainer widths to 60% + 40%. If I turn off wrapping it doesn’t stack at all.

I know I’m missing something so simple.. just one toggle switch somewhere lol. Please help? Don’t we have a tutorial anywhere??

[Fernando]

Hi Slim,

Do you want them to stack on some views?

Out of curiosity, why not use a GB Grid Block? Reference: https://docs.generateblocks.com/article/grid-overview/

[SLIM]

Yes naturally… just like the old grid/container elements would. On the a desktop or tablet you’d have them side by side.. but then on a mobile because it won’t be visible – they would have to stack.

[Leo]

Perhaps this article would provide some insight:
https://docs.generateblocks.com/article/layout-options-overview/

I believe you can set the flex-direction to column on mobile to achieve what you are looking for.

If that doesn’t help then please link us to the page in question.

[SLIM]

Man I read through that and yes it is basic CSS. but … I feel like there’s a bug and it seems to be effecting all of the sites lol.

Have a look at my video (attached) // As it contains personal URLS i put it the private area.

I actually put two websites to show you guys the kinda bugs I’m getting here lol. Please watch part 1 and part 2 and listen to my commentary.

I’m sure it’s either bugged out, or I’m just missing a SIMPLE option? Going crazy here. Sorry.

GeneratePress has gone from my go-to platform to harder than elementor with this latest update.

[David]

Hi there,

the issue is due to a “bug” with how copy and pasted blocks behave.
All GB Blocks have a Unique class.
This class is the specifier for its CSS.
When you copy and paste a block on the same page a new unique class is generated for the copy.
But this does not happen when you paste it into a new page or any post type ( eg an element ).
Sp we end up with a class conflict.

This is happening here, as those buttons have the same classes as those buttons in the page hero.

To fix this, edit the footer element, Duplicate those blocks and delete the originals. The duplication will generate CSS classes

[SLIM]

David you are a legend. Thank you. This does explain a lot, as naturally I’ve been copy pasting into new containers.

What about the stacking and percentages / wrapping though???

[David]

Does your parent container Flex have any Column Gap or do the flex children have any horizontal margins ?

[SLIM]

Yes, on the column gaps. But if we can’t have column gaps am I suppose to do just padding and margins on each container? Or is there just no way to gap them?

If you can could you watch the 2nd video, I show detailed examples there.

Also one more question. Will the GRID column eventually be phased out as legacy? Or is that here to stay?

[David]

The major pitfall with CSS Flexbox is it does not discount Column Gap from the flex containers width.
Instead a Column Gap is kind of interpreted as another flex child.
So in your example a layour with a 10px column gap, results in a layout of: 60% 10px 40%. Which totals greater then 100%, and if flex wrap is enabled it will create a new row to accommodate this.

There are several methods to deal with this, but the simplest method is:

1. DO NOT USE the width property.
2. Select the two inner Containers > Layout > Flex Child, and use Flex: Grow and Shrink props instead.
3. For both Containers set the shrink to 1 – this allows the containers to shrink if needed.
4. Then set each of the child containers grow as a “fraction” of the space you want it to occupy.
For a 60% / 40% layout – that converts to fractions of: 3 and 2

Grid Block will remain albeit it will undergo an upgrade, as it does a lot of the hard-work for you when creating grids with gaps for example. And i would still recommend using it for most cases especially if the end user needs to make simple changes and doesn’t want to learn flexbox.

[SLIM]

Hey David,

While I did kinda find my own workaround – it’s great to know this. I personally never dabbed into the flex child area. But it makes sense to me 🙂

Thank you so much!

HOWEVER. I have another small bug regarding the new containers.
The SHAPES? Are they not working or… ?

Have a look at my new video. Attached to private info.

—

If anyone is curious about what my work around was.
IT WAS TO SET ONE OF THE CONTAINERS WITH A PERCENTAGE and JUST LEAVE THE OTHER BLANK. It seems to work flawlessly. I also set a column gap in PX and it’s fine.

[David]

If you don’t give a flex child a width or set any flex properties then its width will be defined by its contents.
So if that container was empty, lets say it was just for a background image, and it had no width then it would collapse. Add something inside that container it will grow to fill that 🙂

Shapes use Absolute positioning, so they should not be affected by its Containers display properties.
But they are affected by its Postition property, which must be set to Relative

[Author]

Posts