Jump to content
Sign in to follow this  
mbreese1

How do I use multiple classes with browser specific classes?

Recommended Posts

mbreese1    1
mbreese1

Hi!

I have:

body.android .section-branding .mainlogo-link, body.android .section-branding .mainlogo-img {
}

Which works great and fine and good, but I need to apply multiple classes (.ipod, etc). My small, unexercised css brain is getting boggled my multiple classes and selectors. Do I need to do the above for each browser class or is there a shorthand way to do this that is good and clean and easy?

 

Please help :)

 

Bree

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Hello Bree 

 

Have a look at the free plugin Browser Specific CSS to help speed up this process http://www.pagelines.com/store/plugins/browser-css/


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
mbreese1    1
mbreese1

I'm using that plugin and went through the documentation already. What I want to know is if I need to do:

body.android .section-branding .mainlogo-link, body.android .section-branding .mainlogo-img {
}

body.firefox.section-branding .mainlogo-link, body.firefox.section-branding .mainlogo-img {
}

for EACH browser I want to target or if there is a shorthand way to write this.

 

Thank you,

Bree

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hello Bree,

 

Yes, unfortunately, to apply custom CSS for specific browsers, you have to replicate and edit the code for each browser, but I think it's possible (when the instruction is the same) to do things like:

.ipad .iphone .android #page....{the same instruction}

 

It's only when you change the instructions that you need to have a new line.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

You're very welcome.


Former PageLines Moderator, Food Expert and Raconteur

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  

  • Similar Content

    • MissT
      By MissT+
      Hi there,
       
      I've noticed there is an issue with a site I created awhile ago - the browser specific css I added for IE isn't being picked up for IE11 - it is for the older versions (not checked IE10) though yet - but not for IE11.
       
      Did a bit of investigating and strangely there is no class for ie or ie11 appearing??  It actually shows .firefox instead.
       
      I don't have any cache plugins on this site by the way.
       
      Versions:
      PL Framework 2.3.7
      WP 3.4.2
      Browser Specific CSS plugin 1.3 - is there a newer version of this available perhaps?
       
      I can give the URL via private message if need.
       
      Many thanks in advance!
       
       
       
       
    • lexlex88
      By lexlex88
      I'm using w3 total cache and the browser specific css tools. However, I've discovered which ever browser opens a page first sets that browser body tag in the cache for that page.
       
      Example:
       
      I open pageA in firefox after reseting the cache.  Then I open pageA in safari hoping the browser specific css I set for safari will apply, but it does not because the body tag is cached as firefox.
       
      Thanks for any help.
    • laurenp
      By laurenp
      Hi There,
       
      I'm trying remove the background image on the features slider when viewing on a mobile. This is due to the features text overlapping the image at small sizes which makes it illegible. So I'm looking to either hide it or replace it with just white.
       
      I've got the Browser specific CSS plugin installed and have got a few things working with it but can't figure out what class I should target to hide the image.
       
      I've tried things such as...
       
      body.mobile  .fmedia { display:none;}
       
      body.mobile  #feature_slider .fmedia {
      background: none;
      display:none;
      }
       
      I think I'm close but not quite there. Any help would be appreciated.
       
      Also does the .mobile class cover all mobile devices or do I need to repeat the code for each type of available class ie .iphone, .samsung etc??
       
      cheers!
       
    • ruthtoledoaltschuler
      By ruthtoledoaltschuler+
      This may not be something that can be solved, but I am hoping it can. 
       
      I am using Pagelines PlatformPro and working on this blog that I really want to have a page background color with a certain transparency that allows the image on the background to show.
       
      And I was shocked to see how it displays in Explorer 8 (thought it would be a problem with Explorer 7, but not 8).
       
      The page color simply does not show, and as a consequence it is unreadable.
      Here is the link to the site:
       
      http://travelandpacking.com
       
      Is there any "workaround" CSS code for that? 
       
      Do I have the option of having a CSS rule that applies only when the browser is Explorer 8 to make the page color opaque?
       
      Please, if any one of you Genius of the support team can help me with this it will be greatly appreciated.
      Ruth
       
    • jjc_vr
      By jjc_vr
      Hi there,
       
      I'm trying to hide my supersized background image when using mobile browsers, however my code doesn't seem to be working. I've installed the Pagelines Browser Specific CSS plugin.
       
      I can hide it in all browsers using the following code in custom css:
       
      #supersized {display: none;}
       
      However, if I use add browser specific CSS it doesn't seem to work (i've tried adding .iphone / .ios and even attempted .chrome just to test it on my desktop to no avail).
       
      Any idea what I'm doing wrong?
       
       
×