Responsive Google Adsense Ads to Work on All Devices

Posted on November 21, 2013 in HTML/CSS Category

In this tutorial you will learn how to integrate Responsive Google Adsense Ads in your Website. If you are running a blog with a lot of traffic, you can integrate Google Adsense Ads visible even on mobile phones and tablets.

Preparing Responsive Content

Before adding any ads prepare your full content to know where to place your Google Ads. Also have in mind that when a users will resize the window, your Responsive Google Ad must be from the biggest width size (970x90 or 728x90) to the smallest possible recommended ad size (300x250).

Remember that you are allowed to use maximum 3 Google Adsense Ads per page.

If the device resolution width is smaller than 300 pixels, you can use overflow:hidden with your CSS and the width 100% on your div container.

Adding the HTML without Ads

First we will add the HTML code without adding any Google Adsense Ads, to test our page appearance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Responsive Google Ads</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
	<link type="text/css" href="style.css" rel="stylesheet" />

	<div class="contentBox">
			How to Create your Own Responsive Google Adsense Ads for All Devices

			<strong>Text Tutorial:</strong> <a href=""></a>

			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, possimus natus doloremque consectetur dolor dolore quae neque sint expedita perspiciatis inventore repellat voluptatum voluptatibus soluta deserunt adipisci temporibus veritatis mollitia aperiam praesentium aliquid similique est at laudantium cumque ducimus nostrum odio maxime vero ipsa!

			Rerum, velit, accusamus, consequuntur placeat totam blanditiis debitis voluptatum reprehenderit hic iusto dolores ea sint vitae quidem architecto maxime cupiditate explicabo voluptate autem animi quos ipsa rem modi facere repellendus distinctio suscipit nam tempora quaerat ut eligendi natus nisi dignissimos. Modi, dolor, voluptas, voluptates vero consequatur pariatur officia rem nesciunt voluptate repellendus saepe quasi qui. Nam.


Adding the CSS

Next, we will style the page and make it responsive. In this example, content box will have 1000px width, without sidebar, and will be adaptive for devices.

body {
	background: #FFF;
	color: #000;
	font-size: 10pt;
	font-family: Arial;
.contentBox {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 20px;
.contentBox p {line-height: 24px;}

Visual Results

Below are 2 images, one taken from desktop and one from mobile. If everything looks ok, you can starting placing ads.



Adding Google Ads

In order to have a responsive ad unit will be a little hard and limited. You can add maximum of 3 ads, and you will start with the biggest (970x90) or you can use only the normal wide ad (728x90) and the rectangle ad (300x250). In this tutorial we will use all 3, to understand the concept of using the responsive method.

<div class="responsiveAd970">
	<!-- place adsense 970x90 script here -->

<div class="responsiveAd768">
	<!-- place adsense 728x90 script here -->

<div class="responsiveAd300">
	<!-- place adsense 300x250 script here -->

Using CSS to Make Ads Responsive

When the resolution will be changed we want to display ads in 3 steps. One within 1000px,  the other within 800px and the last one within 350px. These will be the 3 media queries we will be using.

First you need to display only the widest ad and the others to be hidden. Use the CSS below:

.responsiveAd970 { text-align: center; margin: 25px 0 25px 0; }
.responsiveAd300 { display: none; }
.responsiveAd768 { display: none; }

Now you can add the media queries for every screen width:

@media screen and (max-width: 1000px) {
	.responsiveAd768 { display: block; }
	.responsiveAd970 { display: none; }
@media screen and (max-width: 800px) {
	.responsiveAd768 { display: none; }
	.responsiveAd300 { display: block; }
@media screen and (max-width: 350px) {
	.responsiveAd300 { overflow: hidden; padding-right: 20px; }

Notice that we used overflow: hidden in the last media query and that is because if the device's screen is smaller than 300px (your ad size), the ad will not be responsive and the user must scroll a little in the right. The overflow property will solve this thing up. Below you can view a live example or you can download sample files.

Live Example

Download Files

Related Articles
Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

2 × two =

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.