Ads in Header Right messing up Mobile Responsive Design

[mistydawnkearns]

Hello, many of my clients have a leaderboard size ad (728 wide) in their header right widget area.  Now that I am switching them over to mobile responsive themes, I am  having an issue with this ad messing up the mobile site.

Is there any way to code it where the header right widget does not show up on the mobile responsive view?  Or something I'm missing on making this work?

Here's a link for an example on my personal blog  if you pull it up on a mobile device you will see how the ad takes over the screen and makes the blog content really small:

http://justmisty.com

Thank you so much for any help. I've been researching like crazy on this.

Misty

http://justmisty.com

[Debra Scott]

use this code in your text widget

<script type="text/javascript">
var width = window.innerWidth || document.documentElement.clientWidth;
google_ad_client = "ADSENSE PUBLISHER ID HERE";
if (width >= 800) {
 google_ad_slot = "AD ID NUMBER HERE";
 google_ad_width = 728;
 google_ad_height = 90;
} else {
 google_ad_slot = "AD ID NUMBER HERE";
 google_ad_width = 320;
 google_ad_height = 50;
}
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

You can find the ad ID number from your My Ads section of your adsense. You can see the code in action here

Note: original source for code

---

need help with your business or personal website? Contact me at Fat Cat Designs

[mistydawnkearns]

Thanks Debra, that will work for adsense but not all my clients ads are adsense.  I appreciate the help!

I also did figure out this morning how to code it so the header right doesn't show. In case anyone else needs to know- in the mobile responsive part for the smaller media screens simply change or add:

#header .widget-area {display:none;}

[Debra Scott]

you could also do a conditional code for the header widget to either show a smaller ad or leave the else empty which will literally display nothing.

---

need help with your business or personal website? Contact me at Fat Cat Designs

[Author]

Posts