How to remove sidebar on mobile view?

I wanna remove the sidebar in mobile view, I am using stack integity. Here is URL: learnmechanical.com

Hey Saswata,

Thanks for writing in.

This is possible by adding some custom CSS that targets the mobile view. For this, you can write a custom CSS that targets the sidebar and wrap it in a Media Query so that it will only take effect in mobile devices like this:

@media (max-width: 480px) {
    .x-sidebar {
        display: none;
    }
}

Please note that the code above will not display the sidebars throughout the site.

Hope this helps.

sorry but it won’t work

Hi @learnmechanical2019,

You can try this code instead.

@media (max-width: 767px) {
    .x-sidebar {
        display: none;
    }
}

I can see you have autoptimize plugin installed, please make sure to clear your plugin cache after adding it.

If it still doesn’t work, please provide us your admin login in Secure Note

Thanks

Sorry, nothing changed

Hi @learnmechanical2019,

You forgot to close the curly bracket(}) in your custom CSS.

Please find this custom CSS:

@media screen and (min-width: 980px) {
    .category .entry-featured {
        width:80%;
        margin: 0 auto
    }

And change to this:

@media screen and (min-width: 980px) {
    .category .entry-featured {
        width:80%;
        margin: 0 auto
    }
}

Hope it helps :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.