Inserting media query into .class not working

Developer Support CMS Development
1

Am I missing something here? Shouldn’t this work? In the first example, I apply an outline to an H1 and remove it for widths less than 786px.

.header-container-wrapper .billboard-content h1 {
 outline: 1px solid #fff;
 color: {{ brandGreen }};

 @media (max-width: 768px){
 outline: none;
 }
}

But it doesn’t work. If I do it this way it works fine:

@media (max-width: 768px){
 .header-container-wrapper .billboard-content h1 {
 outline: none;
 }
 }

I’m new to Hubspot so please let me know if there’s a way around this. We’re trying to clean up some CSS and group our media queries better but we’re running into some roadblocks.

Thanks!

2

Hi @MrCapp,

Yes, a Second way is right to follow.

/* Desktop CSS */
.header-container-wrapper .billboard-content h1 {
 outline: 1px solid #fff;
 color: {{ brandGreen }};
 }

/* Responsive CSS */
@media (max-width: 768px) {
 .header-container-wrapper .billboard-content h1 {
 outline: none;
 }
}

Thanks

3

Thanks for the reply @TRooInbound

Can you tell me why the first version would not work?

Is this specific to Hubspot? Why would media queries need to be outside of the sprcific class I’m targetting? Is there a way to include the media query insdie of the class?

Thanks again!

4

Hi @MrCapp,

include the media query inside of the class is the wrong syntax of the CSS.

this is possible with the use of SCSS, not CSS.

I’m not sure about SCSS is supported with HubSpot or not.

Thanks

5

Ahhhhh - thanks for pointing that out @TRooInbound

I think I assumed that because I was able to set vaiables like I can in LESS that I could do similar things like media queries.

Now I just need to find a way to better group these CSS classes. Having the same classes in separated media queries is causing grief for the people who are editing the code.