Jump to content

Desktop Only Css

Recommended Posts

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;

}

Link to comment
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?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.