Force blocks to be same height in row

Hey,
Thanks for posting!
This is tricky trying to think of the best way to implement. It seems to me that having the “learn more” text/button all aligned would make for the most appealing look which means setting a min-height per device for the text and title area. That should give the most control. The issue I see with an option to force just the height of the info box container is that inner content wouldn’t align.

I’ll play around with some tests.

Ben

I’ve managed to do it by setting the row inner height to 100% and adding a custom css class in the meantime.

Thanks for looking into this and the work put into this amazing plugin ??

.forceheight100 .kt-blocks-info-box-link-wrap.kt-blocks-info-box-media-align-left.kt-info-halign-left{
	height: 100%;
  min-height: 100%;
  overflow:auto;
}

• This reply was modified 5 years, 9 months ago by Qi Xiang.
• This reply was modified 5 years, 9 months ago by Qi Xiang.

I added minimum height support to the latest version so you can set the minimum height of the text and the title. That way they can match across a row.

Ben

Im stuck on this one also. Min height settings does not solve my problem. I need something like the info box (but I dont use the icon) that has a heading and text below with a set background color, but I need them to be perfectly square with a fixed width or high irrespective of the text or header length. Is there a way to do this?

Hey @toniictech
can you give me an example? A fixed width wouldn’t work in a responsive environment. Are you using a non-responsive theme?
Ben

It is responsive. Perhaps fixed ration them is a better way of saying it. I dont have a live example to share yet but I have a 2×2 grid so 4 cells each that have a header and text. Each cell needs to stay the same size in relation to each other

I think our Image overlay block may be what you are looking for because you can define a ratio and the text is positioned within it. FYI this is part of our Pro Blocks.

https://themes.kadencethemes.com/ascend-premium-10/image-overlay-block/

That will probably work. I do have pro. I dont need an image – just a color background but I can upload that as an image. Is there a way to put a “read more” call in that?

Hey,
There are only two text inputs. You would have to add “read more” as part of the second input.

Ben

Dear Ben,

I think I don’t get how to do it the “force” thing… My inspiration about what I want to do is something similar to this: https://www.game-learn.com/clients/

In my website I want to:
– Customer Logo
– Name (Title)
– Image customer
– Customer comment
– Button to “View case study”

The “problem” is that the customer comment can be variable so if I put 3 columns these may differ in lenght so the buttons they will be not align.. How can I manage to align them?

Hey @javidal
Can you link to the page you are working in so I can get a better idea of what you are doing?

If you are using columns then you can add a row inside a column. In the row structure settings, you can define a minimum height. By adding a since column row and then placing your Customer comment text into that row you can define the minimum height to match the tallest Customer comment section on your page.

Ben

Dear Ben,

thank you so much for your help. As I said before, I am trying to do something similar like this website: https://www.game-learn.com/clients/ but in this order:

– Customer Logo
– Name (Title)
– Image customer
– Customer comment
– Button to “View case study”

Here you can see different proofs I am doing right now: https://pruebawhiinstitute2.server1.demoswp.com/a-whi-clientes/

thank you so much for your help and for the developing!! I am so gratefull! ^_^
Javi

Hey,
So you won’t be able to do this with a single block. You will need to create columns. Then inside each column add each piece.

Customer logo (image block)
Name (heading block)
Image customer (image block)
Customer comment ( add a row layout block, set the layout to single column, add a paragraph block inside for your text, then in your row layout block settings set the minimum height in the “structure” settings)
Button – (button block)

Does that make sense?

Ben

Thank you so much Ben!

it worked for me (more or less! :P).