Custom CSS Classes

Permalink
Hi,
I am trying to edit an image block (it's the logo above the navigation dropdown button) so that in mobile max-height won't exceed 90px. Anything bigger hides the dropdown menu's close button behind the logo once it's expanded preventing closing of the nav menu. I realize I could change the z-index of the "close button," but I'd rather shrink the logo so it doesn't hide the button.

My question is, where is the best place to write my media query in C5 for what I assume will be a custom block class? Would it be in the design/customize/custom css menu under the gear icon, or could it be in the main.less file?

I have seen the tutorial that shows how to create custom classes, but I guess what I'm missing is where to store the classes which I would be calling in the custom block class?

http://documentation.concrete5.org/developers/designing-for-concret...

----
All I need to add in my media query is this:

@media screen and (max-width: 768px) {
    .site-logo {
        max-width: 90px;
        margin: auto;
    }
}

View Replies: View Best Answer
HMcCarthy replied on at Permalink Reply
For now, I created the class in the design/customize/custom css box in the gear icon, and called that class on the image block under design and custom template menu/custom class. Is that the best way to do what I want if creating a custom block class?
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Hi eriset,

What you are doing is fine. If you have access to the actual CSS/Less files used by your theme, I would lean towards using them over the Custom CSS method.
HMcCarthy replied on at Permalink Reply
Ok thanks, I guess I wanted to know what the best practice is. Thank you again!
HMcCarthy replied on at Permalink Reply
Ok thanks, I guess I wanted to know what the best practice is. Thank you again!
tallacman replied on at Permalink Reply
tallacman
If you created the theme add it to your css files.
If its a purchased theme, subject to updates, add the code to the Additional Css area available in most themes. If that doesn't exist, clone the theme to your themes folder and change the css there.
tallacman replied on at Permalink Reply
tallacman
If you created the theme add it to your css files.
If its a purchased theme, subject to updates, add the code to the Additional Css area available in most themes. If that doesn't exist, clone the theme to your themes folder and change the css there.