Topic: Pricing Table – Flex fixed or minimum height rows

gstock
March 3, 2024 at 2:52 am

Hi,

I am trying to create a features / benefits section in Generateblocks Pro with a layout like a pricing table using Flexbox.

The only trouble I’m having is to have each row be a minimum or fixed height so the rows stay in alignement across the columns.

So for example assume there are 4 equal width columns using flex basis. Column 1 is a list of Features. The feature description may be one line or wrap to 2 lines if it is longer, increasing the height of that row. And the corresponding row in the next column may have a single tick-mark Icon, which determins its height, which may not match the corresponding row in column 1.

Here is a screenshot of a flexbox I am making for reference. The “topics” column text could be longer for a specific topic, and thus wrap. https://i.postimg.cc/JhPhHV9D/image.png

I’m assuming there’s a way to do it with a combination of flex settings, min- height settings, etc. but can’t figure it out.

I hope the question is clear. Thanks in advance for your help.
Greg
David
March 3, 2024 at 5:45 am

Hi there,

for the rows across a grid to maintain the same height, then the heights would need to be fixed.
Min Height would be best as it would stop overflow in the event of text reflow.

Can I see what you have so far on your site so I can see the issue ? I may be able to advise the action to take to resolve the problems
gstock
March 3, 2024 at 5:59 am

Hi David,

Thanks for your quick reply. I’ve posted a link in the PI section that you can look at.

Agree the min-height should be a solution, so just need to get the structure and syntax right.

Thanks!
Greg
David
March 3, 2024 at 6:40 am
Ok, so to begin – looking at your structure:
```
Container Block #1 - Full width
----  Container Block #2 - flex row
---- ---- Container Block Column
---- ---- Container Block Column
---- ---- Container Block Column
---- ---- Container Block Column
```
Container Block #2
In the Layout settings remove the Align Items option

Container Block Column(s)
Set the Sizing > Min Height o 100%

At this point all your columns should now be the same height.
Can you confirm that.

Then your first column I would recommend filling it with the content that occupies the largest amount of space.
Then you can set the Min Height of each of those inner containers to cover that height.

Once the first columns done, just duplicate it for the remaining columns and swap the content
gstock
March 3, 2024 at 7:18 am

Thanks David,

That did the trick! Working perfectly. Resolved.

Thank you for the quick and clear help. Much appreciated.

Cheers.
Greg
David
March 3, 2024 at 7:19 am

You’re welcome!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Pricing Table – Flex fixed or minimum height rows