All geek questions in one place

Floating / fixed div in footer

I have a wordpress site and I would like to display 1 Google Adsense ad (320 pixels x 50 pixels) at the very bottom of the page for mobile users only. When I speak at the bottom of the page, I really have to say the bottom of the visible screen, so no matter where the user is on the page, this is always visible.

I decided that I needed to use media queries, and I figured out the size of the main mobile devices that use a site with a size of 320 or 360 pixels.

I wrote Css for this and placed in the standard style.css file:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 360px) {
.mobileadunit {
  width:320px;
  height:50px;
  position:fixed;
  bottom:0px;
  }

} `

Then I put the div in the footer.php file in wordpress immediately before the tag

<div class="mobileadunit"> ADSENSE CODE </div>

but, in spite of all my efforts, I cannot make it manifest. Am I doing something wrong, which is obvious?

, , , - , , - , .

+4
2

, css "@media", -, , .

, , . , , , Google AdSense . , -, AdSense - , .

, ?

, , Google AdSense. , 2 AdSense - WordPress. . Google AdSense ( ) AdSense ( ).

, Google Adsense AdSense, , Adsense , , Google AdSense - .

, , javascript + css - , . , , css js.

:

, , (- ), / . - AdSense (320x50px) , , -, javascript / Google, , .

, , , . .

, CODEPEN, , AdSense . , iOS 7 iPhone 5.

, :

HTML:

AdSense <div> id="responsive-adsense " <div> id="adcontainer", , , , , .

<div class="adcontainer">

<div id="responsive-adsense">
<!-- AdSense javascript goes here -->
</div>

</div>

JavaScript AdSense:

.

<div class="adcontainer">
<div id="responsive-adsense">

 <script type="text/javascript">
  // Replace google_ad_client number with ith your AdSense Publisher ID
  google_ad_client = "ca-pub-928637890363315";
  // Detect and calculate the width of the "<div>" where AdSense ads will be rendered
  var containerWidth = document.getElementById( "responsive-adsense" ).offsetWidth;
  // If ad container is 728px...
   if ( containerWidth >= 728 ) {
  //...Then, display Adsense ad of size 728x90px
  // Remember to replace the AdSense Ad Slot ID as well for all the different size ad units
  google_ad_slot = "2385224440";
  google_ad_width = 728;
  google_ad_height = 90;
    }
  // If ad container is 468px, then display Adsense ad of size 468x60px
   else if ( containerWidth >= 468 ) {
  google_ad_slot = "1350406442";
  google_ad_width = 468;
  google_ad_height = 60;
   }
  // If ad container is 320px, then display Adsense ad of size 320x50px
   else if ( containerWidth >= 320 ) {
  // It is even possible to set a different google_ad_client ID only for your mobile traffic
  google_ad_client = "ca-pub-928637849363315";
  google_ad_slot = "1350806442";
  google_ad_width = 320;
  google_ad_height = 50;
   }
  // If ad container is 234px, then display Adsense ad of size 234x60px
   else if ( containerWidth >= 234 ) {
  google_ad_slot = "2825039647";
  google_ad_width = 234;
  google_ad_height = 60;
   }
</script>

<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

</div>
</div>

javascript- 4 . Google AdSense, 3 , 3 . 1 , . - Google AdSense .

4 javascript :

  • 234 x 60 - Half Banner
  • 320 x 50 -
  • 468 x 60 -
  • 728 x 90 - Leaderboard

css -

AdSense css media, , , , . - , AdSense Mobile (320x50), ...

, display: none; - .

/* Default Stylesheet */

#responsive-adsense {
  display: none; 
}

#responsive-adsense{
  display: none;
} 


/*
GENERAL MEDIA QUERY FOR SMALL SCREEN SIZES - COVERS COMMON MOBILE DEVICES, PHONES/TABLETS...
*/

@media only screen and (max-width: 1023px) {

.adcontainer {
  display: none; 
}

#responsive-adsense{
  display: none;
} 

}


@media only screen and (max-width: 899px) {

.adcontainer {
  width: 100%;
  height: auto;
  position: fixed;
  bottom: 0px;
  display: block;
  background: #e74c3c;
  color: #fff;
  margin: 0 auto;
  padding: 5px;
 }

#responsive-adsense {
  width: 728px !important;
  display: block !important;
}

}


@media only screen and (max-width: 767px) {

.adcontainer {
 width: 100%;
 height: auto;
 position: fixed;
 bottom: 0px;
 display: block;
 background: #e74c3c;
 color: #fff;
 margin: 0 auto;
 padding: 5px;
}

#responsive-adsense {
 width: 728px !important;
 display: block !important; 
}

}


@media only screen and (max-width: 599px) {

.adcontainer {
 width: 100%;
 height: auto;
 position: fixed;
 bottom: 0px;
 display: block;
 background: #e74c3c;
 color: #fff;
 margin: 0 auto;
 padding: 5px;
}

#responsive-adsense {
 width: 468px !important;
 display: block !important; 
}

}


@media only screen and (max-width: 479px) {

.adcontainer {
 width: 100%;
 height: auto;
 position: fixed;
 bottom: 0px;
 display: block;
 background: #e74c3c;
 color: #fff;
 margin: 0 auto;
 padding: 5px;
}

#responsive-adsense {
 width: 320px !important;
 display: block !important;
} 

}

/* Here the css for mobile devices */  
@media only screen and (max-width: 320px) {

.adcontainer {
 width: auto !important; 
 padding: 0px !important;
 height: 50px !important; 
}

#responsive-adsense {
 width: 320px !important;
 display: block !important; 
}

}

, : Google AdSense - , . https://support.google.com/adsense/answer/1354736?hl=en&topic=1271508

, Google , , , AdSense Google Adsense.

:

, AdSense -. , Google.

, :

http://www.labnol.org/internet/google-adsense-responsive-design/25252/

http://www.akshitsethi.me/google-adsense-responsive-ads-explained/

, . .

+2
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .mobileadunit {
      width:320px;
      height:50px;
      position:fixed;
      bottom:0px;
      display:block;
  }
}

, - , min/max-width min/max-device-width, , jsfiddle:

http://jsfiddle.net/hm3Cj/

/ min/max-device-width: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml ( , .) /. , , . 320 x 480 .

+2

Source: https://habr.com/ru/post/1530700/

More articles:


All Articles