Add responsive advertisements to your site.

readme.md

Google Adsense allows you to make campaings with responsive advertisments, add this code into your framework or just include the css. it works like a charm.

available ads

(prefix xs-)

phones, screens smaller than 480px. each class name is consisted of the respective prefix specific for the screen size where it will be activated and the ad. size. the b in front stands for block.

Additional classes.

You can use .center if you want to center the ad or (prefix)-hide if you want to hide it on a certain size range. In the following example we will have an ad that is centered and is visible only on mobile screens and tablets.

…

168px by 42px (.xs-b168x42) 216px by 54px (.xs-b216x54) 300px by 50px (.xs-b300x50) 300px by 70px (.xs-b300x70) 300px by 250px (.xs-b300x250) 250px by 250px (.xs-b250x250) 200px by 200px (.xs-b200x200)

Small tablets and phones with screens larger than 480px to 768 it includes iPad in landscape mode.

300px by 75px (.sm-b300x75) 320px by 50px (.sm-b300x75) 300px by 250px (.sm-b300x75) 336px by 280px (.sm-b300x75) 250px by 250px (.sm-b300x75) 200px by 200px (.sm-b300x75) Hide the ad for this size range (am-hide).

(prefix md-) Tablets and Screens up to 1200px.

300px by 75px (.md-b300x75) 320px by 50px (.md-b320x50) 300px by 250px (.md-b300x250) 336px by 280px (.md-b336x280) 120px by 600px (.md-b120x600) 160px by 600px (.md-b160x600) 250px by 250px (.md-b250x250) 200px by 200px (.md-b200x200) 720px by 90px (.md-b720x90)

(prefix lg-)

Screens larger than 1200px

Example: This ad will be visible on small medium and large screen and hidden on mobile devices.

implementation

Every block holding the ad code should have first .adv class then you add the specific classes that would make the a visible on your desired contexts.

…

_responsive_ads.scss

// A simple and practical way to add responsive advertisments to your website
// include the responsive_ads.css into your page or add this code to your SCSS or LESS framework.
// made my mariusnedelcu.com feel free to use, and come with improvements.

// required mixins
@mixin size($width, $height) {
  width: $width;
  height: $height;
}
@mixin square($size) {
  @include size($size, $size);
}

// breakpoint variables 
$screen-xs:                  480px !default;
$screen-sm:                  768px !default;
$screen-md:                  992px !default;
$screen-lg:                  1200px !default;

// responsive advertisments ///
.adv {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  
  &.center {
    margin-right: auto;
    margin-left: auto;
  }
  
  // .b120x120 { .square(120px); }

  @media screen and (max-width:$screen-xs) {
   &.xs-b168x42  { @include size(168px, 42px); }
   &.xs-b216x54  { @include size(216px, 54px); }
   &.xs-b300x50  { @include size(300px, 50px); }
   &.xs-b300x70  { @include size(300px, 50px); }
   //
   &.xs-b300x250  { @include size(300px, 250px); } //Medium rectangle 
   &.xs-b250x250  { @include size(250px, 250px); } //Square
   &.xs-b200x200  { @include size(200px, 200px); } //Small square
   &.xs-hide      { display: none; }
   background: green;
  }
  
  @media screen and (min-width: $screen-xs) and (max-width:$screen-sm)  {
   &.sm-b300x75  { @include size(300px, 75px); }
   &.sm-b320x50  { @include size(320px, 50px); }  //Mobile leaderboard
   //
   &.sm-b300x250  { @include size(300px, 250px); } //Medium rectangle 
   &.sm-b336x280  { @include size(336px, 280px); } //Large rectangle
   &.sm-b250x250  { @include size(250px, 250px); } //Square
   &.sm-b200x200  { @include size(200px, 200px); } //Small square
   &.sm-hide      { display: none; }

   // custom //
   &.sm-c450x120  {
    @include size(430px, 120px);
    margin-left: auto;
    margin-right: auto;
    .b120x120 {
      margin: 0px 15px;
      float: left;
    }
   }
   background: yellow;
  }
  
  @media screen and (min-width: $screen-sm) and (max-width: $screen-md) {
   &.md-b300x75  { @include size(300px, 75px); }
   &.md-b320x50  { @include size(320px, 50px); }  //Mobile leaderboard
   //
   &.md-b300x250  { @include size(300px, 250px); } //Medium rectangle 
   &.md-b336x280  { @include size(336px, 280px); } //Large rectangle
   &.md-b120x600  { @include size(120px, 600px); }
   &.md-b160x600  { @include size(160px, 600px); }
   &.md-b250x250  { @include size(250px, 250px); } //Square
   &.md-b200x200  { @include size(200px, 200px); } //Small square 
   &.md-b720x90   { @include size(720px, 90px); }  //Large leaderboard
   &.md-hide      { display: none; }
   background: pink;
  }
  
  @media screen and (min-width: $screen-md) {
   &.lg-b300x250  { @include size(300px, 250px); } //Medium rectangle 
   &.lg-b336x280  { @include size(336px, 280px); } //Large rectangle
   &.lg-b120x600  { @include size(120px, 600px); }
   &.lg-b160x600  { @include size(160px, 600px); }
   &.lg-b250x250  { @include size(250px, 250px); } //Square
   &.lg-b200x200  { @include size(200px, 200px); } //Small square 
   &.lg-b720x90   { @include size(720px, 90px); }  //Large leaderboard
   &.lg-hide      { display: none; }
   background: orange;
  }
}

ad.html

<div class="adv center xs-b300x75 sm-b320x50 md-b720x90 lg-b720x90">
    <img src="assets/img/adv_img.png" alt="responsive advertisment">
</div>

responsive_ads.css

/* A simple and practical way to add responsive advertisments to your website
 include the responsive_ads.css into your page or add this code to your SCSS or LESS framework.
 made my mariusnedelcu.com feel free to use, and come with improvements. */

.adv {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
}

.adv.center {
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 480px) { 
  .adv { background: green; }
  .adv.xs-b168x42 { width: 168px; height: 42px; }
  .adv.xs-b216x54 { width: 216px; height: 54px; }
  .adv.xs-b300x50 { width: 300px; height: 50px; }
  .adv.xs-b300x70 { width: 300px; height: 50px; }
  .adv.xs-b300x250 { width: 300px; height: 250px; }
  .adv.xs-b250x250 { width: 250px; height: 250px; }
  .adv.xs-b200x200 { width: 200px; height: 200px; }
  .adv.xs-hide { display: none; } 
}

@media screen and (min-width: 480px) and (max-width: 768px) {
  .adv { background: yellow; }
  .adv.sm-b300x75 { width: 300px; height: 75px; }
  .adv.sm-b320x50 { width: 320px; height: 50px; }
  .adv.sm-b300x250 { width: 300px; height: 250px; }
  .adv.sm-b336x280 { width: 336px; height: 280px; }
  .adv.sm-b250x250 { width: 250px; height: 250px; }
  .adv.sm-b200x200 { width: 200px; height: 200px; }
  .adv.sm-hide { display: none; }
  
  /*custom - example*/
  .adv.sm-c450x120 {
    width: 430px;
    height: 120px;
    margin-left: auto;
    margin-right: auto;
  }
  .adv.sm-c450x120 .b120x120 {
    margin: 0px 15px;
    float: left;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) { 
  .adv { background: pink; }  
  .adv.md-b300x75 { width: 300px; height: 75px; }
  .adv.md-b320x50 { width: 320px; height: 50px; }
  .adv.md-b300x250 { width: 300px; height: 250px; }
  .adv.md-b336x280 { width: 336px; height: 280px; }
  .adv.md-b120x600 { width: 120px; height: 600px; }
  .adv.md-b160x600 { width: 160px; height: 600px; }
  .adv.md-b250x250 { width: 250px; height: 250px; }
  .adv.md-b200x200 { width: 200px; height: 200px; }
  .adv.md-b720x90 { width: 720px; height: 90px; }
  .adv.md-hide { display: none; } 
}

@media screen and (min-width: 992px) { 
  .adv { background: orange; }
  .adv.lg-b300x250 { width: 300px; height: 250px; }
  .adv.lg-b336x280 { width: 336px; height: 280px; }
  .adv.lg-b120x600 { width: 120px; height: 600px; }
  .adv.lg-b160x600 { width: 160px; height: 600px; }
  .adv.lg-b250x250 { width: 250px; height: 250px; }
  .adv.lg-b200x200 { width: 200px; height: 200px; }
  .adv.lg-b720x90 { width: 720px; height: 90px; }
  .adv.lg-hide { display: none; } 
}

responsive_ads.less

// A simple and practical way to add responsive advertisments to your website
// include the responsive_ads.css into your page or add this code to your SCSS or LESS framework.
// made my mariusnedelcu.com feel free to use, and come with improvements.

// required mixins - size

.size(@width, @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size, @size);
}

// breakpoint variables 
@screen-xs:                  480px;
@screen-sm:                  768px;
@screen-md:                  992px;
@screen-lg:                  1200px;

// responsive advertisments ///
.adv {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  
  &.center {
    margin-right: auto;
    margin-left: auto;
  }

  @media screen and (max-width:@screen-xs) {
   &.xs-b168x42  { .size(168px, 42px); }
   &.xs-b216x54  { .size(216px, 54px); }
   &.xs-b300x50  { .size(300px, 50px); }
   &.xs-b300x70  { .size(300px, 50px); }
   //
   &.xs-b300x250  { .size(300px, 250px); } //Medium rectangle 
   &.xs-b250x250  { .size(250px, 250px); } //Square
   &.xs-b200x200  { .size(200px, 200px); } //Small square
   &.xs-hide      { display: none; }
  }
  
  @media screen and (min-width: @screen-xs) and (max-width:@screen-sm)  {
   &.sm-b300x75  { .size(300px, 75px); }
   &.sm-b320x50  { .size(320px, 50px); }  //Mobile leaderboard
   //
   &.sm-b300x250  { .size(300px, 250px); } //Medium rectangle 
   &.sm-b336x280  { .size(336px, 280px); } //Large rectangle
   &.sm-b250x250  { .size(250px, 250px); } //Square
   &.sm-b200x200  { .size(200px, 200px); } //Small square
   &.sm-hide      { display: none; }
   
   // custom //
   &.sm-c450x120  {
    .size(430px, 120px);
    margin-left: auto;
    margin-right: auto;
    .b120x120 {
      margin: 0px 15px;
      float: left;
    }
   }
   background: yellow;
  }
  
  @media screen and (min-width: @screen-sm) and (max-width: @screen-md) {
   &.md-b300x75  { .size(300px, 75px); }
   &.md-b320x50  { .size(320px, 50px); }  //Mobile leaderboard
   //
   &.md-b300x250  { .size(300px, 250px); } //Medium rectangle 
   &.md-b336x280  { .size(336px, 280px); } //Large rectangle
   &.md-b120x600  { .size(120px, 600px); }
   &.md-b160x600  { .size(160px, 600px); }
   &.md-b250x250  { .size(250px, 250px); } //Square
   &.md-b200x200  { .size(200px, 200px); } //Small square 
   &.md-b720x90   { .size(720px, 90px); }  //Large leaderboard
   &.md-hide      { display: none; }
  }
 
  @media screen and (min-width: @screen-md) {
   &.lg-b300x250  { .size(300px, 250px); } //Medium rectangle 
   &.lg-b336x280  { .size(336px, 280px); } //Large rectangle
   &.lg-b120x600  { .size(120px, 600px); }
   &.lg-b160x600  { .size(160px, 600px); }
   &.lg-b250x250  { .size(250px, 250px); } //Square
   &.lg-b200x200  { .size(200px, 200px); } //Small square 
   &.lg-b720x90   { .size(720px, 90px); }  //Large leaderboard
   &.lg-hide      { display: none; }
  }
}

.square(@s) { width: @s; height: @s; }