Streaming live at 10am (PST)

Custom Code Media Queries


#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.


#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.


#7