1

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!

3 Answers 3

0

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

0

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.

https://www.w3schools.com/css/css_display_visibility.asp

0

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.

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