Hide Sidebar Widgets on Mobile

[GR8FL]

I am sure this can be done in CSS but I don’t know how. Currently, they are stacked under the content.

Thanks.

 

[scrambler]

Give us a link to your site to be sure of it

[GR8FL]

Weird that I never saw this reply. I hope this issue isn’t cropping up again.

Here’s the site: https://sussexaa.org/

 

[GR8FL]

@Scrambler, do you know how to hide sidebar widgets on mobile?

[scrambler]

Sorry, did not see your answer…

.is-mobile #primary-widget-area {display:none;}

[GR8FL]

Thank you.

Is it possible to apply the CSS on a per page basis? Maybe using the Page ID#?

 

[scrambler]

Yes is-mobile and page id class must be connected as they are on the same body tag

.is-mobile.page-id-xxxx  #primary-widget-area {display:none;}

[GR8FL]

If I wanted to have this setup for several pages, could I put it in one rule?

.is-mobile.page-id-xxxx, .page-id-yyyy #primary-widget-area {display:none;}

 

[scrambler]

This reply has been accepted as the best answer.

You have to duplicate the whole selector

.is-mobile.page-id-xxxx #primary-widget-area, .page-id-yyyy #primary-widget-area {display:none;}

If you have a lot of pages, a better way is to give all these pages a common class like

myhidebar

that you would place in the Page editing page > Xtreme Options > Xtreme Plus > per page added classes > Container box

Then the single rule below will affect all the pages with that class

.myhidebar #primary-widget-area {display:none;}

[GR8FL]

That is so awesome. Thank you.

[GR8FL]

I am using Arconix FAQ plugin which essentially creates posts not pages. Where can I assign the rule in these instances?

I do not see under Xtreme Options > Xtreme Plus > per page added classes > Container box

And for that matter, how would I individually assign posts to hide sidebar if mobile?

I tried .is-mobile.page-id-xxxx #primary-widget-area {display:none;} and then .is-mobile.post-id-xxxx #primary-widget-area {display:none;} and they had no effect.

I could set up a primary widget which would only show if not mobile and a secondary widget to only show if mobile, then that would be fine too.

[GR8FL]

I ended up with this in my CSS which seems to do the trick globally.

@media (min-width: 767px) {#secondary-widget-area {display:none;}}
.is-mobile #primary-widget-area {display:none;}

If after this, if I want to hide the secondary widget on mobile for a given page, I suppose I could add what you suggested, but I still don’t know how to hide if it’s a particular post.

.is-mobile.page-id-496 #primary-widget-area {display:none;}

 

[scrambler]

I am not following.

First if you want to hide both widget area and use the @media (which is a bit faster to activate), you can put it all under a single rule

@media (min-width: 767px) {
#secondary-widget-area {display:none;}
#primary-widget-area {display:none;}
}

” I still don’t know how to hide if it’s a particular post.”

Are you trying to hide it on a specific Single post page, all single posts pages, a blog page?

Be more specific and eventually give a link to the page(s) in question

For a Specific page and using @media it would look like

@media (min-width: 767px) {
.page-id-xxx #secondary-widget-area {display:none;}
}

[GR8FL]

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).

 

 

[scrambler]

For single post page, in the xtreme options > Xtreme Plus TAB, there is a box for “Per Post body Class ” you can use to put the class

I did not know what you were doing with the @ media rule, so disregard my remarks.

I did forget to mention that the rule to hide the sidebar on mobile for pages with the class would be

.is-mobile.myhidebar #primary-widget-area {display:none;}

[GR8FL]

Thank you.

[Author]

Posts