hide widget areas on specific pages and mobiles

[monere]

Hi,

how can I hide certain sidebars (widget areas??) on specific pages only, and on specific devices?

Let’s say that my website has 4 pages, and of these 4 pages only page 1 and page 2 need to have top widget area + footer widget area and no other sidebars / widget areas anywhere on the page.

So, for these 2 pages I went ahead and created custom widget areas in the sidebars & layouts section of the weaver legacy menu, which I named:

• page1_top
• page1_footer
• page2_top
• page2_footer

And the thing I’d like to do with these custom widget areas is that I want the footer areas (so, page1_footer and page2_footer areas) to be visible only on desktop devices while the other 2 areas (page1_top and page2_top) to be visible only on non-desktop devices (phones, tablets, ipads, whatever).

I tried various CSS rules and combinations but none of them hid the damn areas on either mobile, or desktop and I don’t know what else to try (and yes, I did select these custom widget areas for the pages I want them to appear, under the Per Page Options menu on these specific pages).

I tried stuff like this….

.is-desktop .page1_top {display:none;}
.is-desktop .page1_top {display:none!important;}
.is-desktop .page1_top {display:none !important;}
.is-desktop #page1_top {display:none;}
.is-desktop #page1_top {display:none!important;}
.is-desktop #page1_top {display:none !important;}

And then I tried with .is-mobile instead of .is-desktop and tried all of the above variations again… and then I replaced .is-mobile with .is-smalltablet and then with is-phone and so on. None of these things worked, and then I went ahead and tried with this type of rule:

@media (min-width:800px;) .page1_top {display:none;}

And I also toyed with the !important and # modifiers for the above rule and tried other rules that I don’t even remember. I did these over the last 4-5 hours and absolutely none of them works… then I tried the @media screen rule with the above modifiers and this also didn’t work, either.

I’m really at a loss now and don’t know what else to try, so can you please give a helping hand? Just help me figure this out cause it’s driving me up the wall and I’m a very panicky and fixist dude. If I can’t get things my way I freak out and do all sorts of weird things lol

Thank you in advance!

John

[scrambler]

This reply has been accepted as the best answer.

Many different tools.

In each page editing page in Xtrem 4 Options for this page > Visibility TAB, you can hide them individually on all devices

If you want different content in widget areas to show on different device, you can use the Show_if or Hide_if shortcodes.

You would use a single widget area for all devices, and have all the content in there using them like

[show_if device=desktop]  desktop content [/show_if]

[show_if device=mobile]  Mobile content [/show_if]

Now if you are using specific widgets and not just content, you could use CSS as you had tried, but you did not inspect the site with the browser developer tools, so you did not have the proper class.

The class on the replacement widget is per-page-AreaName

So the rules you are looking for are

.is-desktop .per-page-page1_top {display:none;}

.is-mobile .per-page-page1_footer {display:none;}

If that does not work, leave your rules in place, and give us a link to the page so we can verify what is going on.

 

[monere]

The class-specific rules did the trick.

A big THANK YOU for saving me more headaches and frustration. I tried so many combinations, but never thought about trying the per-page class *facepalm*

Also, the visibility tab does nothing as it only hides various areas but on all devices. As you can see from this screenshot there is no option for controlling devices from the Visibility tab

https://postimg.cc/PNmHvXxz

Is it possible that my version of Weaver is bugged and there are device-specific options that don’t appear on the Visibility tab ?? Cause I really can’t see anything that would let me hide stuff on mobile devices…

And those shortcodes don’t help me in this particular case but thanks for letting me know about them. I’ve got an idea where to use those xD

Weaver is so cool when you know how to use it…. really the best WP theme ever!

[scrambler]

You misunderstood what I said, I said that the visibility TAB hides them on ALL devices. There are no device specific hide on a per page basis.

[monere]

oh… yeah, you’re right. I just re-read your reply and I can see that now. My bad :p

[Author]

Posts