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!