Jump to content
janpeeters

Browser specific CSS not working on homepage

Recommended Posts

janpeeters+    31
janpeeters

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

Share this post


Link to post
Share on other sites
catrina    103
catrina

If it's not working on the Dutch page, it probably has to do with the plugin you're using for translation (although I'm not sure how language and CSS can be related). What mobile CSS did you try using for Masthead and Anything Boxes?


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
Simon    247
Simon

Your using w3 total cache, so the end user will always get a cached page. It might have some kind of mobile settings, i dont know.

  • Like 1

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

Hi Simon,

Thanks a lot, that pointed me in the right direction. It indeed pre-creates cache pages for quick access, but it didn't distinguish between creating them for mobile and desktop. Thanks again!

Jan

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

For those of you wondering about the solution. This is what works for me, but don't ask me if I understand all the nuts and bolts... I don't

You can create User Agent Groups in W3 Total Cache. If you activate the preinstalled 'High' group and point it to the Pagelines Framework Base theme. You can still use Cache Preload under Page Cache but now it creates another cached version specifically for that user group. This solved my problem mentioned above.

Share this post


Link to post
Share on other sites
Rob    547
Rob

Jan, thank you for that insightful guidance. I'm resolving this, but if you need, we can reopen it at any time.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

The topic was marked as resolved.


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


  • 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!
       
    • mbreese1
      By 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
    • 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
       
×