I want to hide a widget completely when a visitor is using an ipad on portrait orientation (768x1024).

I know that the media query will be this:

@media (width: 768px) and (height: 1024px) {
   .nameofthewidgetclass { display: none; }

But I have two issues.

1) I am not 100% sure how to target the specific widget. Obviously I cannot hide footer-widget, as that removes all of them. I know I could install a plugin that lets me have custom CSS per widget, but I try keep plugins to a minimum so if someone could assist, I would appreciate it.

2) When I just used chrome to inspect the widget, then assigned the "display: none;" to it, it did hide it but the white space was not reclaimed. The solution must be able to hide this white space.

Thanks in advance!


You can use CSS and pseudo classes, like :nth-of-type(n) to target that specific widget.

You could also use Javascript in a similar way, with jQuery .addClass('classname'), and/or "finding" the widget through .nth-child() selector, then applying .css('display','none').

| improve this answer | |

Display: none; will always remove the element completely including any white space taken up by that element. Visibility: hidden; on the other hand removes the element but keeps whatever space it would have taken up. So something else must be causing the white space such as margin or padding from a nearby element.


| improve this answer | |

You should use the widget's ID, this will give you a unique name to target. If not available, check and edit your theme to make sure that the theme's register_sidebar call has this (most importantly the id part):

'before_widget' => '<div id="%1$s" class="widget widget-%2$s">'

This makes sure the widget will get its unique id that you can use for your purpose.

Then you can use

@media screen and (width: 768px) , screen and (height: 1024px) {
     #widgetId { display: none; } 

to hide the widget using css.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.