27 Oct Hide Widgets on Smaller Screens
Just a short post and something I need to do a lot and that is hiding things for people on small monitors, iPads, iPhones and the rest. It uses the @media CSS, which I wont be going into in detail here and I know it wont work on every browser, cough old versions of IE. Anyway read on or just scroll to the bottom and grab the CSS.
The Example
The example here is Leaving Cert Mind Maps, a new site that has launched that uses a nice little WordPress plugin called Sharexy for social Sharing. Great plugin easy to setup, but a little bit of a fail on mobile. basically this little widget floats to the left in the middle and allows for an easy share. In reality on a mobile device it overlaps text and images and looks pretty nasty.
Anyway long story short the simple and in my opinion correct solution is to hide it on any device that has a width smaller than 960px, the code I used below takes into account the padding on Leaving Cert Mind Maps so I bumped it up to 995px
The Code
@media all and (max-width: 995px) {
.shr_v{display:none}
}
