I've been working/searching for this specific idea for a while, but I can't seem to find a solution.
Basically I'm working with a wordpress plugin, where a piece of content is shown, and it works fine except for mobile devices.
I'm trying to fix this by making the DIV hide when the viewport hits a certain width.
This is what I have so far:
This is assuming #attentionGrabber is the div I'm trying to control.
I think that is the most simple way to show or hide it depending on the viewport, but nothing seems to happen when I place that code in the header.
Basically I'm working with a wordpress plugin, where a piece of content is shown, and it works fine except for mobile devices.
I'm trying to fix this by making the DIV hide when the viewport hits a certain width.
This is what I have so far:
Code:
<script>
jQuery(document).ready(function () {
var screen = $(window)
if (screen.width() < 800) {
$("#attentionGrabber").hide();
}
else {
$("#attentionGrabber").show();
}
});</script>This is assuming #attentionGrabber is the div I'm trying to control.
I think that is the most simple way to show or hide it depending on the viewport, but nothing seems to happen when I place that code in the header.