Jump to content
Lynn759

Browser Specific CSS

Recommended Posts

Lynn759

The mobile view does not seem to work well on the iPhone or iPad. Can someone give some examples of browser specific css to use with the plugin? There doesn't seem to be any documentation with the plugin. Or does anyone have a suggestion of a Wordpress plugin that works with the 2.0 Framework that does the same thing without adding your own css. I was kind of under the impression mobile views would work a little better than what they do. I remember seeing a photo of an iPad and iPhone with the new framework.

Share this post


Link to post
Share on other sites
Simon

The browsercss plugin adds classes to the main body tag of your page. If you look at the source of a wordpress page you will see this:



	With the plugin enabled you will see:
	

All desktop browsers are supported, it will shoe individual IE versions too. Every major mobile browser and tablet are also supported. The plugin is there for developers to fine tune their designs for every browser. I can give you a list of every browser it supports if you want.

Share this post


Link to post
Share on other sites
Lynn759

The classes would be helpful. Also maybe some common examples of what can be done. I'm trying to hide a feature slider plugin on mobile devices. Here is what I've tried.

.iOS #featured_slider {display:none;}
and this
.iPad #featured_slider {display:none;}

but neither seem to be working. http://iostv.com

Share this post


Link to post
Share on other sites
Rob

The plugin is case sensitive, so not .iOS but .ios and not .iPad but .ipad


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob

Here's the full list: .handheld .mobile .ios .tablet .iphone .ipad .ipod .android .blackberry .opera-mobile .palm .symbian .windows-mobile .lg .motorola .nokia .samsung .samsung-galaxy-tab .sony-ericsson .nintendo .desktop .lynx .firefox .opera .safari .chrome .ie .ie6 .ie7 .ie8 .ie9 The IE version is auto appended so you get .ie .ie9 or .ie. ie8


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
wonderwoman

okay, so what does .mobile cover? Is that mobile phones only, or any mobile device? it looks like I have .mobile, .handheld, .desktop and .tablet to define devices generally. I just want any mobile phone to not display a few elements of my page. But I do want tablets to display all elements, just like a desktop. And I'm not sure what a "handheld" means. I don't care what the browser is, just the screen size. Or am I missing a key understanding here... is there something I should know?

Share this post


Link to post
Share on other sites
catrina

.mobile and .handheld selectors would affect the elements on mobile devices and any other device that isn't a phone or tablet (my guess is an iPod Touch). If you want the tablet version to display what's on the desktop version, you can ignore the selector .tablet.


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
wonderwoman

Ah, thanks for that!

Share this post


Link to post
Share on other sites
wonderwoman

K. Tried this: .handheld, .mobile { #sidebar-wrap {display:none;} .sb_fullwidth {display:none;} } but it doesn't have an impact on the devices I can test on such as ipod and android. mmm. not sure what I'm doing, the documentation is scant... Not getting any joy with this plugin. even if I do specific device such as .ipod the elements still display. Must be doing something really stupid.

Share this post


Link to post
Share on other sites
wonderwoman

I seem to be running into trouble when I try combining things. When I use .mobile #sidebar-wrap {display: none;} it works fine. If I try to combine 2 or more classes, then it falls apart. so ".handheld, .mobile" doesn't work. Not sure why, but I managed to get it working listing items individually. Would love some expert feedback to explain what I'm not understanding, despite the fact I have it working.

Share this post


Link to post
Share on other sites
Danny

Hi WonderWoman, To combine two or more you would need to set it like below.

.mobile #sidebar-wrap, .ipad #sidebar-wrap, .iphone #sidebar-wrap, .ipad #sidebar-wrap {display: none;} 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
wonderwoman

Now I know what .mobile does. Any device, including a laptop or pc that uses a "mobile" type of internet connection like a USB wireless modem, it triggers that section of code.

Which causes a complication - when a "mobile" laptop connects via a USB modem, I want a desktop or tablet type of display.

Tried:

.iphone, .ipad, .ipod, .android, .blackberry, .opera-mobile, .palm, .symbian, .windows-mobile, .lg, .motorola, .nokia, .samsung, .sony-ericsson #feature_slider {display: none;}

but that leaves me a blank display - clearly I've upset the code, just not sure why. Too many?

Am I asking for too much intelligence from the browser? Am I going about this the wrong way?

Share this post


Link to post
Share on other sites
Danny

Hi,

Try this:


.iphone #feature_slider,
.ipad #feature_slider,
.ipod #feature_slider,
.android #feature_slider,
.blackberry #feature_slider,
.opera-mobile #feature_slider,
.palm #feature_slider,
.symbian #feature_slider,
.windows-mobile #feature_slider,
.lg #feature_slider,
.motorola #feature_slider,
.nokia #feature_slider,
.samsung #feature_slider,
.sony-ericsson #feature_slider {display: none;}[/CODE]


Please search our forums, before posting!

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


×