Two columns same height (responsive)

[knowmates]

Hi there,

I just created a layout with a width of 98 % so there is always space of 1 % on the left, on the right and between rows and columns.

Now I created a row with two columns (3/4 + 1/4). In the left column I used a lower layer background-image to be able to place a button on that image. In the right column I set a background color, placed an image element and below two text elements and also a button.

How can I make sure that the columns have the same height but to be responsive?

How can I make sure that the buttons are on the same height (also responsive)?

Best regards

[ruenel]

Hello There,

Thanks for writing in! Please understand that the column heights relies on the height of the contents of the column. With your current settings, it is impossible to have the same height for your columns. The left column is dependent on the margins of your button. To make sure that they will have the same height, you will need a custom JS to do that. Please check out this snippet that might help you resolve this issue.

Use Flex Layout | Themeco Docs

For an alternative, you can make use of the marginless column option in the row settings and add an inline css for each column vertical-align: bottom; to make sure that the buttons in each columns will be inline.

Hope this helps.

[knowmates]

Hi there,

I just tried the jQuery snippet but it only works with marginless columns activated but I need a space of 2 % between the columns. Is there a way to do that without losing the equal column height?

The vertical-align to position the bottom at the same height does work but in the right column the image does slide a bit more towards the bottom of the column so the grey background color of the column is visible above the image. How can I avoid this?

Best regards

[paul.r]

Hi,

I checked your site and it seems that you have already resolved these issues.

To adjust the space between columns, you also need to adjust the width of the columns.

I can see you have added margin-right: 0.5%;width: 25%; to the left column and added margin-left: 0.5%; to the right column.

I could also not see the grey background color of the column that is visible above the image.

Can you please confirm if where to resolved these issues, if not kindly provide us with screenshots.

Thanks

[knowmates]

Hi there,

yeah we just found another way. I guess I will try the marginless-columns way maybe later on another site.

Best regards

[thai]

Glad you’ve sorted it out