Jump to content
Sign in to follow this  
paulzz1

Hide search field by media query

Recommended Posts

paulzz1

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

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

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

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

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

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

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

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

Yeah, I tried several values, no difference.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×