# Inserting media query into .class not working

**URL:** <https://community.hubspot.com/t/inserting-media-query-into-class-not-working/3773>\
**Category:** CMS Development\
**Created:** [November 1, 2017, 5:06pm UTC](https://community.hubspot.com/t/inserting-media-query-into-class-not-working/3773 "2017-11-01T17:06:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![MrCapp](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mrcapp/32/82209_2.png) [@MrCapp](https://community.hubspot.com/u/MrCapp)\
**Post date:** [November 1, 2017, 5:06pm UTC](https://community.hubspot.com/t/inserting-media-query-into-class-not-working/3773/1 "2017-11-01T17:06:55Z")

</div>

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.

```auto
.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:

```auto
@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!

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [November 1, 2017, 6:49pm UTC](https://community.hubspot.com/t/inserting-media-query-into-class-not-working/3773/2 "2017-11-01T18:49:45Z")

</div>

Hi @MrCapp,

Yes, a Second way is right to follow.

```auto
/* 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

---

<div class="post-metadata">

**Author:** ![MrCapp](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mrcapp/32/82209_2.png) [@MrCapp](https://community.hubspot.com/u/MrCapp)\
**Post date:** [November 1, 2017, 8:01pm UTC](https://community.hubspot.com/t/inserting-media-query-into-class-not-working/3773/3 "2017-11-01T20:01:41Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [November 1, 2017, 8:28pm UTC](https://community.hubspot.com/t/inserting-media-query-into-class-not-working/3773/4 "2017-11-01T20:28:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MrCapp](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mrcapp/32/82209_2.png) [@MrCapp](https://community.hubspot.com/u/MrCapp)\
**Post date:** [November 1, 2017, 8:48pm UTC](https://community.hubspot.com/t/inserting-media-query-into-class-not-working/3773/5 "2017-11-01T20:48:55Z")

</div>

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.