Jump to content


Photo
- - - - -
Resolved

Browser specific CSS not working on homepage

browser specific css

  • Please log in to reply
6 replies to this topic

#1 janpeeters

janpeeters

    Advocate

  • Members

  • 294 posts
  • LocationBreda, The Netherlands
  • Country: Country Flag

Posted 12 October 2012 - 12:01 PM

Hi,

I'm using quite a large margin on the left side of my website

Please Login or Register to see this Hidden Content

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:

Please Login or Register to see this Hidden Content


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

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 12 October 2012 - 02:16 PM

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?

#3 Simon_P

Simon_P

    Messer

  • Administrators
  • 8388607 posts
  • LocationDevon
  • Framework Version:2.0
  • Country: Country Flag

Posted 12 October 2012 - 04:58 PM

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.
  • janpeeters likes this

#4 janpeeters

janpeeters

    Advocate

  • Members

  • 294 posts
  • LocationBreda, The Netherlands
  • Country: Country Flag

Posted 13 October 2012 - 08:48 PM

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

#5 janpeeters

janpeeters

    Advocate

  • Members

  • 294 posts
  • LocationBreda, The Netherlands
  • Country: Country Flag

Posted 13 October 2012 - 09:09 PM

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.

#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 October 2012 - 10:29 PM

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

#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 October 2012 - 10:30 PM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved, browser specific css