Originally I was asking how to hide the sidebar widgets on mobile, and then I asked how to do it for a particular page, and then I asked how to do it for more than one page. The answer you gave me was I could create a CSS rule such as:
.myhidebar #primary-widget-area {display:none;}
And then for every page I wanted to apply this rule, I would go into the Page editor > Xtreme Options > Xtreme Plus > per page added classes > Container box and add myhidebar.
Ran into issues because there is no place on posts to add this class. Or at least I don’t see it.
So I then decided to add just one item in the secondary widget and use that for mobile, and hence came up with the following 2 rules which would have the primary widget only displayed if size is greater than 767px (not mobile) and have the secondary widget only displayed if mobile.
@media (min-width: 767px) {#secondary-widget-area {display:none;}}
.is-mobile #primary-widget-area {display:none;}
You are saying I can combine this into one rule instead of two:
@media (min-width: 767px) {
#secondary-widget-area {display:none;}
#primary-widget-area {display:none;}
}
But that hides my primary widget on displays larger than 767px (like my desktop or tablet).