Streaming live at 10am (PST)

Custom Code Media Queries

Hi everyone,

Long time reader first time poster!

I was wondering if anybody could shed some light on a problem I’ve come across. I’ve currently in the middle of a build for the following website: http://red-jacket-consulting.webflow.io/ inside of webflow.

At 1150px I would like to hide the “book a consult” button in the header. To do this I have placed the following media query into the custom code panel:

<style>
    @media screen and(max-width: 1150px) {
    .nav-CTA {
      display:none !important;
    }
}
</style>

Could somebody please let me know if I’ve missed something? The button really doesn’t want to go away haha…

Any suggestions are much appreciated!

Looks good to me, did you wrap it in style tags and put it in the head code section?

Hi Mogeek,

Thanks for the reply. I believe so, here’s a screenshot.

Any other ideas? I don’t want to have to export it just to fix this one little bug.

Try to add a space between “and” + “(max-width: 1150px)”

@media screen and (max-width: 1150px)

See if that works…

If you want to have disappear your element AT 1150px and higher its a wrong definition…it needs to be MIN-WIDTH.

 <style type="text/css">
      @media screen and (min-width: 1150px) {
      
      .nav-CTA {display:none!important;}
      
      }
    </style>

Class names are case-sensitive. Please inspect the element on the published site that you want to hide, using your browser’s development console.

In your case, you should be using .nav-cta instead of .nav-CTA.

Webflow automatically converts whatever you type in the class field in the designer,
to lower-case-hyphenated.