Equal heights 1/3 columns

https://theme.co/apex/forum/t/code-snippet-make-all-columns-equal-height/272 Tried that without success. Not all 3 is equal or they are not equal heights on 13inch screens etc. only big screens where headlines does not need to break rows.

Hello @bracas,

Thanks for asking. :slight_smile:

I see that you have added equal height class to the Related Article section. I have a 13 inch Macbook air and on my end it’s working fine. I am sharing screenshot in secure note, please take a look. Please try clearing cache and see how it goes.

In case issue is there, please share some screenshots for us to get better understanding.

Thanks.

Does not work on my 13inch macbook PRO

Hi again,

Thank you for the screenshot, please add the following code in the Theme Options > CSS:

.equal-height .x-promo {
    height: 100%;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

Sweet thanks! problem sovled!

You’re welcome!
Thanks for letting us know that it has worked for you.

Can you help us here with 1/2 blocks? Shared print and url in secure note

Hi Bracas,

Please apply the class equal-height to the ROW instead, and update the given CSS code from this thread to this:

@media (min-width: 768px) {
 .equal-height .x-container {
    display: flex;
 }   
}

Keep in mind that you won’t see your column height with no background-color. So for you to test it, please apply a temporary background-color to your columns.

Thanks,

Does not work see print. Literally nothing happened. added your code instead and to the row and added bg color to show you in the secure note print.

Hi @bracas,

They are already at equal heights, or perhaps are you referring to the button? That they should appear inline with other buttons? What it needs is positioning and not equal heights. Because equal heights are only applicable to the container and not the content, the content is dynamic and it changes depending on the amount of text. Hence, you can’t make the texts with equal heights when there is the long paragraph on the other. And because of this, the button appears in the different position depending on the amount of content above it.

I also checked your site and I don’t see the equal-height being added to any section of your page.

How about limiting the height of text and make them equal? I tried positioning the button and it’s not working since the content is not connected to other buttons. But, it still possible with complex customization that we can’t provide (responsive positioning using javascript).

Thanks.

I removed it since it didn’t work that’s why. But I’ve tired the examples you have provided without success.

Yes buttons it does not look equal. Ok so what you say it’s not possible with the button maybe just add a read more instead of button looks better and don’t make my critical eye go crazy for this “non equal height”.

Hi Bracas,

Sorry for the last CSS code that I provided, there is a typo error on it. Lets try it again, but this time lets align the buttons to the bottom of the column so they’ll align and the columns will look equal.

Please add this code to Theme Options > CSS

@media (min-width: 768px) {
	/*equal height columns*/
 .x-container.equal-height {
    display: flex;
 }
 /*align buttons to bottom*/
 .x-container.equal-height .x-column {
 	display: flex;
    flex-direction: column;
 }
 .x-container.equal-height .x-column .x-btn {
 	margin-top: auto !important;
 }
}

Then add the class equal-height to the ROWs.

Clear all your caching plugins and browser’s cache before previewing the page.

Thanks,

Great! solved it and works perfectly! Many thanks!

You’re welcome.

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