[Resolved] Remove sidebar blog in tablet view

[Renske]

Hi there,

How do I remove the sidebar widgets on my blog in tablet view? Thanks!

[David]

Hi there,

do you want to remove the sidebar or have it displayed below the content ?

[Renske]

What do you mean by ‘displayed below the content’? Will it then display at the bottom of the page? This would be fine 🙂

[David]

Try adding this CSS:

@media (max-width: 1024px) {

    .site-content {
        flex-direction:column;
    }

    .container .site-content .content-area,
    .is-right-sidebar.sidebar  {
        width: auto;
        order: initial;
    }

    #main {
        margin-left: 0;
        margin-right:0
    }

}

[Renske]

Thanks David. Unfortunately this didn’t work 🙁 I’m still seeing the sidebar in tablet view.

[David]

You have this CSS which is broken:

@media(max-width: 768px) {
    #secondary-navigation {
        display: none;
    }
	@media (max-width: 1024px) {

    .site-content {
        flex-direction:column;
    }

    .container .site-content .content-area,
    .is-right-sidebar.sidebar  {
        width: auto;
        order: initial;
    }

    #main {
        margin-left: 0;
        margin-right:0
    }

replace that with:

@media(max-width: 768px) {
    #secondary-navigation {
        display: none;
    }
}

@media (max-width: 1024px) {

    .site-content {
        flex-direction: column;
    }

    .container .site-content .content-area,
    .is-right-sidebar.sidebar {
        width: auto;
        order: initial;
    }

    #main {
        margin-left: 0;
        margin-right: 0
    }
}

[Renske]

Yes, this worked! Thanks again, David! I know I’m keeping you busy at the moment 😉

[David]

You’re welcome!
I prefer being busy 🙂

[Author]

Posts