Resolved Browser specific CSS not working on homepage

[janpeeters 31]

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

[catrina 103]

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?

[Simon 248]

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 31]

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

[janpeeters 31]

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.

[Rob 547]

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

[Rob 547]

The topic was marked as resolved.