Jump to content
Sign in to follow this  

Removing features background image using Browser Specific CSS

Recommended Posts


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;


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??




Share this post

Link to post
Share on other sites
James B

Hi there, it depends how you've inserted the image into the slider, whether it's in the media pad area or the full slide background.


If you could let us have a link to the site you're working on we'll have a look for you.


For example, on my test site the image is full width background of the slider. So i'd hide it using


#feature_slider .fcontainer .feature-wrap.bg_cover {display:none;}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post

Link to post
Share on other sites

Hi James,


I'm also using the text so it's in the media pad area. I tried the code supplied but that removed the text and button with it. Do you have an email so I can shoot the URL to you - I'd rather not post in the forum it if possible.



Share this post

Link to post
Share on other sites

Hello Lauren


Would be preferable if you could provide the link via the forum but if you prefer to email then please use [email protected] Please add a link to the forum topic so we know which topic it refers to. 

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

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.
      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.
      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.
    • mbreese1
      By mbreese1

      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
    • 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:
      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.
    • 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?