Hide search field by media query

[paulzz1+ 3]

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?

[catrina 103]

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

[paulzz1+ 3]

Thanks but that'll only detect the device/browser and not it's orientation/pixel width.

[Rob 547]

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.

[paulzz1+ 3]

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.

[Danny+ 1,327]

Hi, Have you tried:

@media (max-width: 768px) {
	#navbar .searchform {
	display: none;
	}
	}

[paulzz1+ 3]

Thanks Danny but that's what I already had (see my first post). I'm stuck!

[Danny+ 1,327]

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.

[paulzz1+ 3]

Yeah, I tried several values, no difference.

[catrina 103]

Try:

@media (max-width: 768px) {
	div.nav-search {
	display: none;
	}