Add floating ads in high end smartphone browsers

Floating adds example
guide to give you JavaScript code to add floating 320x50 unit size ads in website or blog which is active only in high end mobile phone.

Most of the mobile phones browsers are compatible with all kind of scripting language, whether it may be HTML to HTML5 or JS or CSS of any kind. And also this website made in this languages are responsive to browser width.

The code provided will give you ability to show floating 320×50 pixels ads unit size in mobile phone. This ad will be hidden if your website is viewed in laptop or desktop even in tablets.

Floating Ads in Smartphone

Floating Ads in Smartphone

Floating Ad at the Top of screen:

For making Ad float at top of  mobile screen, you have to first make sure that there is enough space for ads to be float and doesn’t hide any of your website links.

Following is code that is needed to be add in your CSS file

Related:  Google Adwords, Facebook or Twitter Ads: Best for business

After adding above script to your styling sheet CSS, you have to show it up on web page.

This script will allow to show Ads on mobile device.

Floating Ad at bottom of mobile screen:

Similar as top ads script you have to add following script in your CSS file and also to show up in your website add last code to home page.

Related:  Display floating ads in left or right sidebar of desktop website

and in homepage to display in web page

 Floating Ads in Left and Right side for Website:

This is floating Ads can be used in big screen laptops and computer browsers. Where Ads are shown at blank space at left and right side of your website page. Also, download AdSense guide on user engagement for free.

You may also like...

9 Responses

  1. Flow says:


    Thank you for this post! it works very well!

    I have a question about position! I have added the ads on the bottom of my mobile website but the ad is under images when I slide down, is it possible to put it over images?

    thank you!

    • Flow says:

      I solved it :)
      The answer is using z-index:XXX;
      XXX is the value of the z-index the maximum the best it is. You have to check what is your max z-index on css and change XXX by this value +1 minimum

  2. Colin says:

    A good tip, if you just put something very high like 999, you will usually always go to the top layer

  3. David says:

    The mobile banner works (the code for the bottom & top), but the codes result in an ad running atop the webpage on desktop browsers. How can I have this only show on mobile? The “@media only screen and (min-width: 310px) and (max-width:500px)” doesn’t seem to stop the ad from running on desktop version.

  4. Drew says:

    If I am using Google Adsense… Where do I put the adsense code for floating ad on bottom of mobile screen in the code you provided?


  5. Antonio Sousa says:

    Hello friend, I have a called technology blog
    I tried to do as I said, but did not work for me, you would not have a video tutorial or some prints to help me, grateful!

  6. Abdul says:

    Can this work on responsive theme, kindly reply as soon as you get this comment. God bless you

  7. Abdul says:

    I have tried it and it works nice. But the ads only float on my homepage and when i navigate too other post, the floating ad disappears. how do i make it float on all content on my site.

    looking forward to seeing your response sir

    • Abdul says:

      thanks so much for the reply sir. i have tried it, but it only shows on home page, it doesnt show on posts on the site.

      secondly, the ad refuses to float of opera mini, but it does same on blackberry mobile browser.

      My main traffic are from opera mini. kindly tell me what to do sir.

      God bless u

Leave a Reply

Your email address will not be published. Required fields are marked *