Equal Column heights on Mobile

Support
#1

I’m trying to get mobile columns on the same row to be the same height. This is easy to do in VC, but can’t figure it out with Cornerstone. The columns are currently equal height on desktop, but not mobile.

The website is www.dallaswarriorshockey.com

See Below -

Desktop

Mobile

Thanks!

#2

Hi there,

Thanks for writing in! You can do this with custom CSS, first give your section a class e.g same-height and then add the following code in the Theme Options > CSS:

@media screen and (max-width:980px) {
    .x-section.same-height .x-1-2 {
        width: 50% !important;
        display: table-cell !important;
        margin-right: 0 !important;
        float: none !important;
        vertical-align: top !important;
    }
}

Hope this helps!

#3

Typically, there is a place to assign class to sections, but I’ve found that this is only possible when importing one of the demo sections. Unfortunately, this section is not a demo section. Reason being, there are things you can do with default sections that you can not do with the demo sections, and vice versa. For this particular section, it made more sense to use the default skin. Can you instruct me on how to assign a class to this default section without having to create a new section with one of the demo sections?


#4

Hi again,

You can assign class to any section or element whether it’s a demo section or not, just click on Customize tab (see screenshot) to add a class or an ID.

Hope this helps!

#5

This does help in a way, I now know how to assign class for these sections. I don’t know how I’ve never clicked that. The coding is slightly off though. I want the columns to be the same height on mobile, but I do want them to stack instead of maintaining side by side viewing.

#6

Hey there,

Thanks for the update, replace the previous code with the following code:

@media screen and (max-width: 767px) {
  .x-section.same-height .x-1-2 {
    min-height: 250px;
    max-height: 250px;
  }
}

Hope this helps!

#7

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