Jump to content

Make custom CSS NOT apply to mobile devices.

Recommended Posts

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



Link to comment
  • Replies 10
  • Created
  • Last Reply

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

}

Template Developer at Squarespace, @esquareda on Twitter.

Link to comment
  • 9 months later...
  • 5 months later...
  • 1 year later...

@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! :)

Link to comment
  • 1 month later...

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

mobile-version.jpg.fcbdbb96f8cb24f169d4add139c5df14.jpg

bildschirmfoto-2016-03-29-um-183733.png.a2b5b10b8b6ccaf6d77a5d2dbd633e80.png

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.