Docs

[scottkwilson]

Hello,
I am trying to make 3 columns with varying amounts of content be the same height. I have added some CSS to the Style field in Cornerstone to make the heights 560px. This seemed to work; however, on mobile, when you turn the phone sideways, the text goes outside of the columns. I want to have the columns be the same height under all desktop circumstances (i.e. screen resolutions), and when the site becomes responsive, and the columns start to stack, have the text remain in the columns.

Here is my site: http://courtenaysurgerycenter.stormwindcreative.com

Here’s an example of what I want:jupiterosc.com

Thanks and great theme!

[John Ezra]

Hi there,

Thanks for updating the thread! Please remove the 560px from the style fields in cornerstone and use CSS. You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

@media (min-width:980px) {
    div#x-section-1 .x-column.x-sm.x-1-3 {
        min-height:645px;
    }
}

@media (max-width:979px) {
    div#x-section-1 .x-column.x-sm.x-1-3 {
        min-height:750px;
    }
}

Hope this helps – thanks!

[scottkwilson]

Thank you! This is extremely close, but I’m hoping we can get all the way there. If you resize the browser smaller, right before the layout switches to being stacked, the columns start to become uneven. On the desktop, laptop, iPhone and iPad it looks great… the iPad turned vertically has the same issue though. Not trying to be nit picky but I know it can be done cause this site functions this way (http://www.jupiterosc.com/) and it would really be great if mine could do this too.

Thanks so much!

[scottkwilson]

Ok, first I want to apologize. I took the code above and added it to the CSS customizer and I did exactly what you said it would; however, there was too much space between the text and the bottom of the columns. I thought I had a sense of how it was working and made some tweaks to the ‘min-heights’, but that’s when my issues started arising. So, with this in mind, how can I reduce the space between the text and the bottom of the columns?

Sorry if I caused any confusion.

http://courtenaysurgerycenter.stormwindcreative.com

[Joao]

Use this code instead :

@media (min-width:980px) {
    div#x-section-1 .x-column.x-sm.x-1-3 {
        min-height:570px;
    }
}

@media (max-width:979px) {
    div#x-section-1 .x-column.x-sm.x-1-3 {
        min-height:620px;
    }
}

Hope that helps,

Joao

[scottkwilson]

Hello again, I need a little help with making columns the same hight on another site. Can you please give me the code to make the four columns under the ‘Services’ section the same height?

http://qualitycbs.stormwindcreative.com/

Thanks!

[scottkwilson]

Sorry, please use this page instead: http://qualitycbs.stormwindcreative.com/index.php/home-copy/

[Nabeel A]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.page-id-1627 #x-section-2 .x-column.x-sm .x-text {
    min-height: 163px !important;
}

Let us know how this goes!

[Author]

Posts