HTML / CSS Ad position fixing

Question

I need 2 ad containers to be displayed next to my website body (right hand side), but the ads should be displayed only if I am in a desktop / screen size = wider than my website container width. This website is mainly for mobile & I don't need the ads to be displayed in mobile, because we cannot accomodate this ads in mobile screen.

Given my html code below;

<div style="width:320px; height:500px; background-color:#C60; margin:0 auto;">Website</div>
<div id="ad-contextual" style="width:222px; height:150px; float:left; margin-right:20px; background-color:#39F;">Contextual Ads</div>
<div id="ad-sky" style="width:222px; height:600px; float:left; background-color:#996;">Skyscrapers Ads</div>

Thanks

score 1 · Answer 1 · answered Feb 21 '13 at 06:08

Usually I'd say "use a CSS3 Media Query", but in this case hiding the box is not good enough - you'd be generating fraudulent views that way, especially if the site is mainly for mobile devices.

Instead, use JavaScript to detect if( screen.width > 800) (adjust the number as needed) and only insert the ad if the condition is true.

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

You can identify the browser and operating system by sniffing user agent. Then you may deliver the ad by setting a conditional statement in JavaSript. If the platform id Desktop, then show ad, else, hide ad.

refer this stackoverflow question Mobile detection

and this one also Auto detect mobile browser (via user-agent?)

Also search Google for more options.

edited May 23 '17 at 11:56

Community

1
1

answered Feb 21 '13 at 06:11

Alfred

21,058
61
167
249

score 0 · Answer 3 · answered Feb 21 '13 at 06:21

You have 2 ways to do this:

First using jQuery:

var pagewidth = $(window).width();
if (pagewidth > 320) {      
    $("#ad-contextual").css("display", "block");
    $("#ad-sky").css("display", "block");

}
else { 
    $("#ad-contextual").css("display", "none");
    $("#ad-sky").css("display", "none");
}

Second using CSS Media Query:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
     #ad-contextual { display:none; }
     #ad-sky { display:none; }
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
     #ad-contextual { display:none; }
     #ad-sky { display:none; }
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
     #ad-contextual { display:none; }
     #ad-sky { display:none; }
}

HTML / CSS Ad position fixing

3 Answers3