Make a theme mobile friendly

[sunlit_skycat]

Hi, I'm a new Dreamwidth user, and I have a community here, at https://blueheronteanook.dreamwidth.org/. I am using the style Radiant Aqua for Venture, with a lot of recolors, set to 3 Columns (one sidebar on each side), one sidebar on each side. I want to be able to make this theme more mobile friendly by having one column only on mobile, essentially the 1 Column (modules at bottom; no sidebar) layout, while keeping the 3 column layout on desktop.

Someone in another community pointed me here. I was given this code, which I copied and pasted into the Custom CSS box, but didn't produce any changes on mobile when I went to check it on Firefox on a Galaxy Note9.

https://gist.github.com/cmho/b3501c8da9ffeb10e903152136a6377d

@media only screen and (max-width: 768px) { /* you can change the pixel width to whatever you want */
    .column-right #content {
        box-sizing: border-box;
    }

    #content {
        padding: 1em;
    }

    .two-columns-right #content, .three-columns-sides #content {
        border: none;
    }

    #content .inner #primary,
    #content .inner #secondary,
    #content .inner #tertiary {
        width: 100%;
        margin: 0;
        float: none;
    }

    .two-columns-left #secondary > .inner:first-child, .three-columns-left #secondary > .inner:first-child, .three-columns-sides #secondary > .inner:first-child, .two-columns-right #tertiary > .inner:first-child, .three-columns-right #tertiary > .inner:first-child, .three-columns-sides #tertiary > .inner:first-child {
        padding: 0;
    }
}

Comments

[momijizukamori]

Sooooo, it turns out the reason this wasn't working for you is that Venture was missing a meta tag in the header required for correct mobile behavior. It was in fact one of only two layouts missing that tag - and the other is Zesty, which is not maintained. The bad news is that you can't edit this in yourself, because we clean that section of layouts pretty heavily (so people can't include security risks there). The good news is that it's patched, so the next time we do a code push your custom CSS will just work. And hopefully that'll be in the next week or two, because we're overdue for one :)

[sunlit_skycat]

Thanks. I guess I'll just sit around and wait. It's usable enough on mobile until then with lots of zooming.