Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Browser specific CSS not working on homepage


Question

Posted · Report post

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

6 answers to this question

Posted · Report post

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.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites