Hide column with media query

Support
#1

Hi there. I have a page (http://koo.cloud/history/) with a column that looks like a sidebar. I’m trying to hide it using this CSS:

@media only screen and (max-width 768px) {
.column1-leadershiphst {
display: none !important;
}
}

I attributed a class of .column1-leadershiphst in the Pro page builder element but no success. Any advice?

#2

Hi there,

Please try to add these classes to the class field of the column that you want to hide:

cs-hide-md cs-hide-sm cs-hide-xs

Hope this helps.

#3

Thanks. I did not know X had those preset classes. Though I tried using it and see where it might be useful, I’m afraid it doesn’t help me achieve the desired behavior here, as the “sidebar” disappears prematurely. By that, I mean that it disappears before the 2/3 column takes up the whole width.

Is there any other way to do this or understand why the CSS does not work?

#4

Hi There,

You can hide the whole ROW and create another one to the smaller screen width.

On Cornerstone by clicking on the row you will find the option hide based on screen size.

Hope it helps!

#5

So these are my only two options here? The option to hide the column with the CSS I used is not possible?

#6

Hi There,

If you want to go that route of using custom CSS, of course that is possible. Your current CSS is not working because it is missing colon on this part max-width 768px. It should be like below.

@media only screen and (max-width: 768px) {
    .column1-leadershiphst {
        display: none;
    }
}

Hope this helps.