Custom Code Media Queries

Design help Custom code
1

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!

2

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

3

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.

1141×477 29.5 KB

4

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

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

See if that works…

5

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>
6

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.