Hide your Sidebar on Mobile Globally

This is a Developer Level doc.

If you're unfamiliar with CSS and/or editing files, codes and templates, as well as with resolving possible conflict, please seek help from a professional. Under our Support Policy, we don't provide support for modifications and customization.

This CSS snippet will hide the sidebar for mobile devices across your entire website (single pages, blog entries and single blog posts):

/* Hide your Sidebar on Mobile Globally */
@media (max-width: 767px) {
	.widget-area.sidebar-primary { display: none; }

Adjust the max-width value per your need.

All CSS snippets should be added via a child theme's style.css file or using the built-in Custom CSS panel.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.