[Resolved] Change side bar mobile break point

[Sam]

I have a side bar on my blog posts that displays a WP Show post Post archive (image and Header title)

I would like to change the break point – as anything under 900px starts to look long and thin

Not sure how to go about it (can’t figure what element I am trying to set the CSS against)

[Ying]

Hi Sam,

Try this css:

@media (max-width: 900px) {
    .site-content {
        flex-direction: column;
    }
    .container .site-content .content-area {
        width: auto;
    }
    .is-left-sidebar.sidebar, .is-right-sidebar.sidebar {
        width: auto;
        order: initial;
    }
    #main {
        margin-left: 0;
        margin-right: 0;
    }
    body:not(.no-sidebar) #main {
        margin-bottom: 0;
    }
}

Let me know 🙂

[Sam]

Hey Ying – thanks for the speedy reply

That unfortunately hasn’t had any effect

[Ying]

I’m not seeing the code being added – Could you try to clear and deactivate any caching plugins?

Let me know 🙂

[Sam]

Hey Ying

That’s all worked – thanks

I had to wait over night for the hosts CDN to flush – Unfortutnely there wasn’t a way for me to manually flush the cache on my staging site (leant something new)

[Ying]

Awesome! Glad that you figured it out 🙂

[Author]

Posts