Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2
Sign in to follow this  
jack1570047694

Make custom CSS NOT apply to mobile devices.

Question

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



Edited by jack

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 9

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

}

Edited by eanderson

Template Developer at Squarespace, @esquareda on Twitter.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Edited by maxiS

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

This is the code inserted at the moment.

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

Share this post


Link to post
  • 0

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

Edited by moners
Initial Revision

Share this post


Link to post

Create an account or sign in to comment

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

Sign in to follow this  

×
×
  • Create New...