paulzz1+ 3 Report post Posted August 17, 2012 Hi I'm trying to hide the search field on screens smaller than iPad portrait with... @media (max-width: 767px) { #navbar .searchform { display: none !important; } } ... to no avail. I've also tried adding .searchfield but makes no difference. Any ideas? Share this post Link to post Share on other sites
catrina 103 Report post Posted August 17, 2012 You can use the browser-specific CSS plugin to hide search fields on smaller devices: http://www.pagelines.com/store/plugins/browser-css/ Here's an overview on how to use it to create the CSS you need: http://www.pagelines.com/tracking/wiki/Browserspecificcss%3AMainPage Please read the docs before posting. Please do not private message me unless I ask you to. Designer | Catrina Dulay Founder | Catrina and Mouse Share this post Link to post Share on other sites
paulzz1+ 3 Report post Posted August 18, 2012 Thanks but that'll only detect the device/browser and not it's orientation/pixel width. Share this post Link to post Share on other sites
Rob 547 Report post Posted August 18, 2012 Paulzzl, I think you may misunderstand. The Browser Specific CSS plugin allows you to write custom CSS for things in specific browsers... So, if you don't want the search field to show in one, you tell it to display:none; for that browser only. The plugin is not limited to pixel width or orientation. It can do anything any stylesheet can do, but gives you the ability to do it on a browser basis. Former PageLines Moderator, Food Expert and Raconteur Share this post Link to post Share on other sites
paulzz1+ 3 Report post Posted August 20, 2012 Sorry, forgive me, but it's you misunderstanding my question. Perhaps I haven't been clear enough. I don't need to test for device or browser ??” just pixel width. Specifically, a screen with a resolution lower than 768 in width. I successfully utilise media queries elsewhere and I know the code above: @media (max-width: 767px) { selector: property; } } would be vaild ??” all I need is the correct selectors to set the search field to hidden when the width is =<768px. I've used Firebug and still can't get the specificity needed. The Browser Specific plug-in is awesomely useful but not for this specific request. Thanks. Share this post Link to post Share on other sites
Danny+ 1,327 Report post Posted August 20, 2012 Hi, Have you tried: @media (max-width: 768px) { #navbar .searchform { display: none; } } Please search our forums, before posting! Share this post Link to post Share on other sites
paulzz1+ 3 Report post Posted August 21, 2012 Thanks Danny but that's what I already had (see my first post). I'm stuck! Share this post Link to post Share on other sites
Danny+ 1,327 Report post Posted August 21, 2012 Hi, My code is slightly different, the width you have is 767px, I have 768px. This worked for me when I viewed my test site on a special Bookmarklet. Please search our forums, before posting! Share this post Link to post Share on other sites
paulzz1+ 3 Report post Posted August 22, 2012 Yeah, I tried several values, no difference. Share this post Link to post Share on other sites
catrina 103 Report post Posted August 22, 2012 Try: @media (max-width: 768px) { div.nav-search { display: none; } Please read the docs before posting. Please do not private message me unless I ask you to. Designer | Catrina Dulay Founder | Catrina and Mouse Share this post Link to post Share on other sites