Make custom CSS NOT apply to mobile devices.

My CSS seems to work fine on all my browsers, but it is messing with how it displays on my mobile device. Particularly, I am referring to the navigation folder. Is there CSS that will tell it to ignore mobile devices? Or do you have any suggestions for how I could alter my CSS so that it will have the same results without affecting mobile display?

Here's the website

Here's the is the relevant CSS:

#header {border-bottom: 5px solid #a8aab1; padding-bottom: 0px;}

#header .primary-nav .nav-link, .folder-wrapper {line-height: 35px; margin-top: 51px !important; border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; border-top: 1px solid #a8aab1; border-right: 1px solid #a8aab1; border-left: 1px solid #a8aab1; height: 40px !important; background-color: #d1d3da !important; height: 30px !important;}

#header .primary-nav .nav a:link, .folder-wrapper .show-folder  {padding-left: 5px !important; padding-right: 5px !important;}

You can wrap your CSS with a media query to only use the styles in viewports larger than a certain amount. This snippet should do the trick:

@media only screen and (min-width: 760px) {

   #header {border-bottom: 5px solid #a8aab1; padding-bottom: 0px;}
   #header .primary-nav .nav-link, .folder-wrapper {line-height: 35px; margin-top: 51px !important; border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; border-top: 1px solid #a8aab1; border-right: 1px solid #a8aab1; border-left: 1px solid #a8aab1; height: 40px !important; background-color: #d1d3da !important; height: 30px !important;}
   #header .primary-nav .nav a:link, .folder-wrapper .show-folder  {padding-left: 5px !important; padding-right: 5px !important;}

}

Thanks for your reply. Where do I add the selector? Before the "@media only screen..." or after, before the bracket?

I updated the snippet to include your CSS inside the media query.

OK. It's working now. Thanks!

How do you accomplish this outside CSS? I want to add this to a code block so that the block only renders in mobile versions. The code block contains html code, but I have no idea how to wrap this in html terms.

Any help is greatly appreciated!

What are you trying to accomplish? I suggest posting the link to your website and describing what you wish to accomplish.

I am trying to do a similar thing with my website (maxi-spina.squarespace.com) and I like what you have accomplished with behaviour of your header according to the different resizing by media. Would you share the code?Thanks!

@jack I am facing a similar problem I believe, and it would be wonderful if you could help me! I added css in the hayden blog template to show (fixed sizes) images above the excerpts. However, they also appear in that size on the mobile version. I tried to add the code mentioned above but it doesn't seem to work... This is the code I'm using at the moment.

I hope someone can help me! :)

This is the code inserted at the moment.

<style> .view-list .excerpt-thumb {     display: block;     height: 12em !important;     width: 39em !important;%|-302654884_4|% </style>

Hi guys I need your help as I am completely new to this ! I just set up my homepage (monersphotography.com) using the Ishimoto template. I want to add a 2-3 px space between the slided gallery and it worked perfectly fine with the following CSS I found online (see attachment):

However this is a negative effect on the mobile version. Here the space is only added on the left side of the photo. Please see attached screenshot. Can someone please help ?

Thanks Patrick