Hiding an Ad that Broke Mobile Safari

The new PigPog design looks decent on desktops, and looked ok on mobiles, until I added the Google ad under the header. That made iPhones and iPod Touches squash the content into half the screen. Rather than work out why, I’ve just hidden the ad for those users using a CSS media query. All it needed was this, added to the child theme’s style.css file:

@media only screen and (max-device-width: 480px) {
  #header-ad {
    display: none;
  }
}

(Well, that and wrapping the ad in a div with id=”header-ad”.)

This helped me.