Equal height column

Support
#1

Hello, I need to create equal height column. I have used the method discribed here: https://michaelbourne.ca/create-columns-equal-heights/?fbclid=IwAR2682cyFwQAfPP6e-Q-uACajMTIqrI9zePKnJiOLPVOqzjzIyaE_MtMQhg

I have the CSS in place, I have the class in place. Somehow it does not work

This the page: https://djpronx.com scroll down and the three music links should be aligned

Ik hope you can see what I have done wrong
Thousand thanks for your help

#2

Hello @RPronk,

Please do the following as well:

#1. Add the class item-button to the Content Area element that contains the player in each of the columns:

#2. Add the class container to each of the column that contains the content area:

#3. Add these codes in the Global CSS:

.item-button {
  margin-top: auto;
}

.x-container:before {
  content: normal;
}

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

Hope this helps.

#3

Thank you for helping me. I have done so, but sadly it does not function.

#4

Hello @RPronk,

I have checked your page and you have removed the flexmethod class added to the row that contains the three columns.

You do not have to remove anything, you just have to add the steps that I have given in the previous reply.

Also, I do not see this code added on the site:

.item-button {
  margin-top: auto;
}

So, to make it clear - do not remove anything but do not remove anything in your current setup right now and do these:

#1. Put back the flexmethod class added to the row that contains the three columns.

#2. Make sure that these block of codes are on the Global CSS:


.flexmethod {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.x-container:before {
  content: normal;
}

.item-button {
  margin-top: auto;
}

Hope this helps.

#5

Got it! Sorry for misunderstanding.

Your help is much appreciated :grinning:
Thanks!

#6

You are most welcome. :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.