Columns same height

Support
#1

hey!

how can I make the columns same height on all devices? I´ve already tried to change JS but then the buttons where not on the right spot.

Thanks in advance!

#2

Hi Nikolaus,

Thanks for writing in! Please review our knowledge base article on how to achieve equal height columns (https://theme.co/apex/forum/t/code-snippet-make-all-columns-equal-height/272).

Also I would suggest you to review this thread to get a better understanding (https://theme.co/apex/forum/t/make-3-columns-equal-height/46004).

Hope that helps.

#3

Hi,

it kind of worked, I tried to do it with the CSS

but the first column is not exactly the same height and also the buttons are in different height.

Any idea?

best regards

#4

Hi Nikolaus,

It would be tricky to have the contents of the columns aligned with each other because each columns have different length of content which is causing the items to be misaligned as the screen width gets smaller.

You might want to edit or write more javascript code to have the spaces adjusted so that the column contents will align from each other. Unfortunately, we won’t be able to provide the actual codes as this goes beyond the scope of our support.

Thank you.

#5

Ok, but still the columns are not same height as u can see…the first one is a bit larger

Can I fix that easily?

Best regards

#6

Hi There,

Thanks for writing in again!
As this is something related to a custom code we can’t help you with this.

I can suggest you an alternate way which may help you to fix this issue.
First please remove all JS and CSS that you have added to make the height equal.
Then Please give one custom class name to each of your columns.

Remove border and border-radius from the columns and make the row as marginless.

Then add this below CSS to your Theme Option -> CSS

.border-custom {
position: relative;
}
.border-custom .x-bg {
   border: 17px solid #2f4a98;
  border-radius: 25px;
  height: 100%;
  position: absolute;
  width: 96%;
}
@media (max-width: 767px){
.border-custom .x-bg {
width: 100%;
}
.border-custom {
margin-bottom: 30px !important;
}
}

You can change the class name as per your choice, and other content adjustment you can keep as it is.
The CSS may need further adjustment if needed.
As this something related to the custom code we can’t help anymore.

If you would like to learn CSS, I am sharing a few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#7

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