[Resolved] Flex in container layout with 2 rows of text

[Joey]

I have a quick question about flex when creating a container with GenerateBlocks. I previously did this with an html box, where when the box width is shortened, the two columns inside the box are also shortened. So I am trying to recreate the box with blocks because I reuse it all the time on the site and it would be easier to change the info inside. The link below shows the two boxes. The bottom one is what I want it to look like, and the top one is the one I am trying to recreate. For example, this shows how the text overlaps. Part of it is that the bottom box doesn’t have a right border, so there’s more space. But another issue is that in mobile, it moves it into one column.

This is the style on the bottom box:

.bookinfo-row {
  display: flex;
}
.bookinfo-column {
  flex: 50%;
  padding: 10px;align-content	
}

Then I just added these div classes to the rows.

<div class="bookinfo-row">
<div class="bookinfo-column">
<h3>Paperback</h3> 
<p>$11.50<br>
ISBN: 994-2349-24949 <br>
Pub date: Nov 6, 2022<br>
</p> 
</div>
  
<div class="bookinfo-column">
<h3>Ebook</h3> 
<p>$4.50<br>
ISBN: 884-293-33395<br>
Pub date: Nov 6, 2022<br>
</p> 
</div>
</div>

But when I try to recreate this on GenerateBlocks, I can set the flex to 50%, but when I mess with padding, etc. I haven’t been able to make it work. Maybe I’m just overlooking something simple? Any help would be appreciated. Thank you.

[David]

Hi there,

ok, try this, switch the editor to code view from the 3 dot menu, and paste in this CODE:

<!-- wp:generateblocks/container {"uniqueId":"2152e68b","paddingTop":"15","paddingRight":"15","paddingBottom":"15","paddingLeft":"15","paddingSyncUnits":true,"backgroundColor":"var(\u002d\u002dcontrast)","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/grid {"uniqueId":"9e459eb8","columns":2,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"d05ca573","isGrid":true,"gridId":"9e459eb8","width":50,"widthMobile":50,"flexGrow":1,"flexShrink":1,"paddingTop":"10","paddingRight":"10","paddingBottom":"10","paddingLeft":"10","paddingSyncUnits":true,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"c2ccfa53","element":"h3"} -->
<h3 class="gb-headline gb-headline-c2ccfa53 gb-headline-text">Paperback</h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"3da57228","element":"p","marginBottom":"5"} -->
<p class="gb-headline gb-headline-3da57228 gb-headline-text">$11.50</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"a16c3735","element":"p","marginBottom":"5"} -->
<p class="gb-headline gb-headline-a16c3735 gb-headline-text">ISBN: <br>994-2349-24949</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"6c8995e0","element":"p","marginBottom":"5"} -->
<p class="gb-headline gb-headline-6c8995e0 gb-headline-text">Pub date: Nov 5, 2022</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"45e76ea3","isGrid":true,"gridId":"9e459eb8","width":50,"widthMobile":50,"flexGrow":1,"flexShrink":1,"paddingTop":"10","paddingRight":"10","paddingBottom":"10","paddingLeft":"10","paddingSyncUnits":true,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"47a70b55","element":"h3"} -->
<h3 class="gb-headline gb-headline-47a70b55 gb-headline-text">Ebook</h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"10cfbd49","element":"p","marginBottom":"5"} -->
<p class="gb-headline gb-headline-10cfbd49 gb-headline-text">$4.50</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"f3d3c4f0","element":"p","marginBottom":"5"} -->
<p class="gb-headline gb-headline-f3d3c4f0 gb-headline-text">ISBN: <br>884-293-33395</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"b2b5693f","element":"p","marginBottom":"5"} -->
<p class="gb-headline gb-headline-b2b5693f gb-headline-text">Pub date: Nov 6, 2022</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->

Then switch back to the Visual Editor. Does that give you what you need ?

I didn’t add the buttons as i recall the Buy / Read button was a fun CSS event 🙂

[Joey]

Wow, I would never have thought of that. That works even better than my version, thank you. I put the buttons in there but the button-wrap class is causing the buttons to align right. Do you know of a way to fix that? This is the code, it’s in there because it switches the “buy” and “read” buttons so that the white (highlighted) button is on the left:

.button-wrap {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;

If I add it in manually with an html box, it doesn’t do that, maybe because it’s a div class?:

<div class="button-wrap">
<a class="button ghost" href="http://read-link.com">Read</a>
<a class="button buy" href="https://buy-link.com">Buy</a>
</div>

But when I add the buttons with Generateblocks, using Additional CSS class(es), it aligns right, as in the link.

[Fernando]

Hi Joey,

How do you want the buttons in the button-wrap to look like? Should the occupy the entire width? Or, align-center? Or something else?

[Joey]

Oh sorry, I was just trying to get it to align left, like it originally was. I can do it with right padding, but the alignment gets a little off with different sizes.

[Ying]

Hi Joey,

It looks the buttons are aligned left:
https://www.screencast.com/t/FOqGtP51

Did I miss anything?

[Joey]

Ying, are you sure it’s not your cache? This is what it should look like.

Just to clarify, I previously had it aligned right (like in your image) by using an html box. I’m trying to do it with buttons and “Additional CSS class(es)” for the sake of simplicity, so administrators don’t have to get into the code every time they need to change the button links. But maybe it’s not worth the trouble since it still works. I was just wondering why it aligned left with the html box and div class, but aligns right when I use the same classes in the generateblocks editor. Does that make sense?

In the code editor, this is what it’s doing:

The version that works, and aligns left, but I have to use an html box:

<article class="box buy">
<div class="button-wrap">
<a class="button ghost" href="http://read-link.pdf">Read</a>
<a class="button buy" href="buy-link.com">Buy</a>
</div>

And the version that aligns right, and I can change the links with the block editor:

<!-- wp:generateblocks/container {"uniqueId":"c4e348f0","marginUnit":"%","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button-container {"uniqueId":"05a18c9f","marginTop":"10","marginBottom":"15","isDynamic":true,"blockVersion":2,"className":"button-wrap"} -->
<!-- wp:generateblocks/button {"uniqueId":"ac098751","hasUrl":true,"backgroundColor":"","backgroundColorHover":"","textColor":"","textColorHover":"","blockVersion":2,"className":"button ghost"} -->
<a class="gb-button gb-button-ac098751 gb-button-text button ghost" href="http://simipress.com/bibi-bookshelf/previews/207th_bone_preview.pdf">Read</a>
<!-- /wp:generateblocks/button -->

<!-- wp:generateblocks/button {"uniqueId":"4b1411af","hasUrl":true,"backgroundColor":"","backgroundColorHover":"","textColor":"","textColorHover":"","blockVersion":2,"className":"button buy"} -->
<a class="gb-button gb-button-4b1411af gb-button-text button buy" href="https://shop.aer.io/Simian_Editions/p/th_Bone/9781734114249-9470">Buy</a>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/button-container -->
<!-- /wp:generateblocks/container -->

I’m not good with wordpress code. Maybe it’s something with the generateblocks/button? Do you know a way to make it align left so users can still use the block editor for the links in those two buttons? Again, if it’s too much trouble, no worries. I was just wondering.

[Fernando]

You have a CSS class button-wrap that reverses the row. This is the reason why it’s aligned to the right.

Specifically, this rule:

flex-direction: row-reverse.

What you can do is modify your CSS so it gets higher precedence over the default CSS.

For instance, from this:

.button-wrap {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

to this:

.gb-button-wrapper.button-wrap {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

This should align it back to the left.

Or, you can just modify the CSS rules you have. Set it to just flex-direction:row.

[Joey]

Oh, okay, because I’m using gb buttons in the block editor. gb-button-wrapper works. I knew it was something obvious that I was missing. Okay, all clear. Sorry for all the questions. Thank you everyone for all your help.

[Fernando]

You’re welcome Joey!

[Author]

Posts