Jump to content

Search the Community

Showing results for tags 'browser specific CSS'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Found 9 results

  1. 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!  
  2. 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
  3. 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
  4. 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?
  5. Is it possible that your Browser Specific CSS plugin could be updated to include classes for the versions for the most popular browsers? ie is the only browser that has classes for its versions (.ie9 .ie8 and so on...) at present and it would be very useful if there were versions for firefox, chrome, safari and opera. For example I'm finding differences between opera 12.12 and 11.6, all looks good in latest version but the next youngest there are a couple of issues so I can't apply any CSS to .opera as the latest version is fine.
  6. Dearest people-who-know-what-they're-doing, I've doing alright hacking my way through WP and Platform Pro, but I finally really am stuck. I need to hide the background-image from mobile view but cannot (for the life of me) figure out how. I installed Browser Specific CSS to make the process easier, but alas- not easy enough for me. I used the following code to add in the color I want to show in mobile: body.android {background-color: #333333 !important;} Then I tried to use the same idea to remove the image: body.android {background-image: none !important;} This second piece does absolutely nothing. I am completely stumped, but assuming it is something obvious to everyone else in the universe. Possibly I've got the wrong selector/element/class? (Ha ha, like I even know what those are!) My site is still under construction, and I'll clean up my custom code when I finally learn how tanathetattooedlady.com Thank you x50k B
  7. Hi there I'm using the Browser Specific CSS plugin to fix a whole range of issues in IE7. The first issue I want to fix is the width. It's a responsive site, but the maximum width doesn't work in IE7 so everything becomes stretched. I want to add a fixed width to the site for IE7 users, so I've added: body.ie7{width:924px} It works for a split second, then jumps back to full width. I've tried adding !important, but it just does the same. I've tried different CSS like changing text alignment and, again, it changes briefly, but jumps back as if something else is overwriting the CSS. I'm using a child theme and adding the CSS into the style.css, rather than custom code. http://ultragraphics.skitti.sh Thanks in advance
  8. Hi, Earlier discussions was marked as resolved, but actually it was not. In short: - Browser specific css plugin is not working on buddypress pages. Sugggestion was that it had to do with buddypress itself. - On the buddypress forum they are saying it is not a buddypress problem as such. The Browser specific css code is working for the bp-default theme when added to the bp-default functions.php file. Their suggestion is that it has to do with the priority settings of the body_classes filter. - Buddypress uses the body_classes filter too: https://gist.github.com/4077623. At the end they merge the buddypress classes with the wordpress classes. - That brings me back to pagelines. I have tried different priority settings for the body_classes filter in both the Browser specific css and Buddypress plugin without any results. Any idea how I can prioritize the filter the right way? Thank you.
  9. Hi, I'm using quite a large margin on the left side of my website http://www.janpeeters.nl to provide for better focus to the eyes. But on a mobile device this defeats the purpose because it takes up too much valuable browser space. To fix this I've installed the Browser Specific CSS plugin and written different code for .desktop and .mobile like this: .desktop .fullwidth #column-main .mcolumn-pad { margin-left: 9%; margin-right: 1%; } .desktop .one-sidebar-left #column-main .mcolumn-pad { padding: 0 15px 0 30px; margin-right: 1%; } .desktop .one-sidebar-right #column-main .mcolumn-pad { padding-left: 13%; } .desktop .one-sidebar-right #widget-pad { padding-left: 9%; } .mobile .fullwidth #column-main .mcolumn-pad { padding: 14px 10px 0 20px; } .mobile .one-sidebar-left #column-main .mcolumn-pad { padding: 14px 10px 0 20px; } .mobile .one-sidebar-right #column-main .mcolumn-pad { padding: 14px 10px 0 20px; } .mobile #brandnav .title-container { float: left; padding: 0 20px 0 20px; } This works perfectly well for all pages on iPhone except for the static homepage where I use a masthead and anything-boxes as only content. The page has a fullwidth layout but whatever I change in fullwidth CSS it doesn't change. I thought maybe I have a override for that specific page but that doesn't seem to be the case. Really weird is it that it does work on the English homepage but not on the Dutch. Could this be a bug in the plugin? Or am I overlooking something? Thanks, Jan