Row with same height

[EIGENARTdigital]

Hey there,

I still have problems with the equal-height of colums within a row.

I have this problem on mostly every website I am using X-Theme.

For example:
eigenartdigital.com/home2

On this Page I want to set the columns under “Meine Leistungen” to equal height (so the buttons “Mehr erfahren” in every column is inline). How can I do this?

I already tried the following steps but none of them works:

• marginless colums with padding
• JS Code from your documentation
• CSS Code (flex) from your documentation

Hope for a solution, cause I have this problem on every other X-Theme-Website of my customers as well. And under the design-aspect - this doesnt look pretty nice.

Thanks for help and greetings
Andy

[jade]

Hi Andy,

The code you are using from the KB article is actually working (see screencast below)

Please note that the code suggested will set equal height to the columns. The buttons are not aligned because they show right after the text before them and the text in each columns are of different length thus causing the buttons not to appear align.

Please try adding this additional code:

.equal-height .x-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -ms-flex-direction: column; 
    flex-direction: column;  
}

.equal-height .x-column .x-btn {
  margin-top: auto;
}

.equal-height:before {
   content: normal; 
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates.

Hope this helps.

[EIGENARTdigital]

Hey Jade,

thanks for the custom code - it does what I am looking for.

There is just one problem left (see screenshot). On a smaller device width the elements a overlapping - how can I fix this?

I also want the code exlude for mobile device.

Thanks again and best greetings
Andy

[mldarshana]

Hi Andy,

Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area and see if that helps.

@media (max-width:1180px){
  .equal-height .x-column {
    min-height: 65vh;
  }
}
@media (min-width:687px) and (max-width:800px){
  .equal-height .x-column {
    min-height: 75vh;
  }
}

Let us know how it goes.
Thanks!

[EIGENARTdigital]

@EIGENARTdigital

eigenartdigital.com/home2

Hey mldarshana,

thanks for quick reply.
But it doesent work - I am sorry. Its still overlapping and on mobile screen there are giant gaps.

Maybe lets try something different, cause I try out different code snippets for months but none brings a good solution for every device.

For the first it would be enough to vertical-align the buttons on the bottom of the column. I tried it with vertical-align:bottom; on the inline css of the buttons - but there was no effect. So if you could explain how to vertical-align the buttons to the bottom of the column I would be very happy

Thanks again
Andy

[ruenel]

Hello Andreas,

In smaller screens, I am seeing this:

Please do not just resize your browser window. You will need to resize the browser AND refresh the page so that the columns and rows can initialize first.

Hope this helps. Kindly let us know.

[EIGENARTdigital]

Hey RueNel,

thanks for the advice. I just resized the browser window. But why isnt it working than? I think that its a regular case, that the browser window gets resized by hand.

I removed the code right now cause it looks very chaotic when resizing the browser window.

Thanks for answer and support

[thai]

Hi @EIGENARTdigital,

Can you provide us with your admin account so we can take a closer look?

Thank you.

[Beanstalk_Creative]

@EIGENARTdigital I’m looking for the same solution and found your question.

When you say JS code from the documentation, I guess you mean the code here: https://theme.co/apex/forum/t/code-snippet-make-all-columns-equal-height/272 ? If so, there’s an issue with that code - it only runs when loading the page, but I agree with you, it should run when the page is resized too. I’ve modified it to the below. Hope it helps you out

jQuery(document).ready(equalHeight);
jQuery(window).on('resize',equalHeight);
function equalHeight(){
  var max = 0;
  jQuery(".equal-height .x-column").each(function() {
    if( jQuery(this).height() > max ){
      max = jQuery(this).height();
    }
  });
  jQuery(".equal-height .x-column").css('height', max);
}

I’ve also put together a codepen demo here;

[friech]

Hi Simon,

Thank you for sharing your solution,

Cheers!

[EIGENARTdigital]

Hey Beanstalk_Creative,

Yes, this was the code I was talking about.
Thanks for your solution.

I will try when I am back in the office.

Greetings
Andy / EIGENARTdigital

[jade]

You’re welcome, Andy