Desktop Only Css

https://caribou-tiger-66hn.squarespace.com/

Hi! 

I have some code that creates a border around the header. I want this effect only on desktop, not mobile. However, when I use the "desktop only" css code 

@media screen and (min-width:768px) {
paste your CSS code here.
}

above these codes, it doesn't change mobile, and I keep getting an error message. Maybe I am putting it in the wrong spot? The two codes are: 

//HEADER BORDER//
 
.header-title-nav-wrapper 
{
  background-color: #F2F1E5;
  border:1.4px solid black !important;
  width: 90% !important;
}
 

//CUSTOM HEADER//
 
.header .header-announcement-bar-wrapper {

    position: relative;
    z-index: 2;
    width: 180%;
    box-sizing: border-box;
    padding-top: 3vw;
    padding-bottom: 3vw;
    padding-left: 3vw;
    padding-right: 40vw;
    pointer-events: auto;

}

10 hours ago, kaydotjpg said:

I keep getting an error message.

What error message? 

Can you paste in here exactly how you've put those two pieces of code together in your Custom CSS? Or a screen grab with the error message if it all fits in one screen?

Hey @Ziggy sure thing! I added the desktop only code to the first one (header border) right at the top, and you can see the error message in the attached 

You can't combine a media query and classes without wrapping the classes in brackets. So you need another opening { after (min-width:768px)  and a closing } at the end.

@media screen and (min-width:768px) { 
  .header-title-nav-wrapper { 
    YOUR CSS HERE
  }
}