When adding @media only screen and (max-width: 1000px) the code breaks?-CodePudding

The code :

/* Header Height Adjustment*/
#ct-header-wrap.ct-header-layout9 .ct-main-menu > li > a {line-height: 89px;}

works fine, but it makes a minor adjustment in the mobile version Menu Arrows.

https://i.imgur.com/bh796lz.jpeg

When trying to contain this change to the laptop version only, by adding the @media only screen and (max-width: 1000px) /or/ @media (max-width: 1000px) code -the lines li > a become red, and that particular code breaks /resets.

/* Header Height Adjustment*/
@media only screen and (max-width: 1000px)
#ct-header-wrap.ct-header-layout9 .ct-main-menu > li > a {line-height: 89px;}

https://i.imgur.com/Ey6UGbv.jpeg

Is there something that I miss here?

Thank you very much in advance for any feedback

CodePudding user response：

Beware the syntax, please try

@media only screen and (max-width: 1000px) {
  #ct-header-wrap.ct-header-layout9 .ct-main-menu > li > a {
    line-height: 89px;
  }
}

Reference

CodePudding user response：

Media queries are not annotations, by the looks of it I assume you have a Java background.

Media queries wrap the rules that are meant to be applied if it matches in {}.

So instead of

@media only screen and (max-width: 1000px)
#ct-header-wrap.ct-header-layout9 .ct-main-menu > li > a {line-height: 89px;}

it has to be

@media only screen and (max-width: 1000px) {
    #ct-header-wrap.ct-header-layout9 .ct-main-menu > li > a {line-height: 89px;}
}