Question

I have a div box with an absolute position fixed to the left side of a page. It looks great on PC’s and is doing its job of being unobtrusive to the user. However, when the page is loaded from a mobile device, the left side of the screen is no longer way off to the side, it is on the edge of the content so this absolute box now covers a little bit of the content on the left. My goal is to only show this one specific div box to PC’s, while preventing it from loading on mobile devices.

CSS:

.harry {
float: left;
padding: 5px 0 0 0;
margin: 0;
position: absolute;
left: 0px;
top: 100px;
z-index: 999999;
}

HTML

<div class="harry">

<big><p><a href="javascript:popup('Logical Position has served over 250,000,000 impressions on Google, Yahoo!, Bing and Facebook for thousands of clients in the United States, Canada, Mexico and Europe!');"><img src="images/side-harry.png" height=200 /></a>    </p></big>

</div>

Answer 1

One way is to just set a CSS3 media query, and hide that div when a mobile device is detected:

@media screen and (max-device-width: 480px) {
  .harry {
    display: none;
  }
}