twentyeleven mobile site resize error advertisements

  • Resolved wrexsti

    (@wrexsti)


    12 years, 10 months ago

    Hello gals and gents,

    im a bit of a php noob, so bare with me…

    Im using the theme twentyeleven and when you view the site on a mobile device like ipad/iphone/android, it resizes the page to help make it compatible on smaller screens, which is awesome. BUT the advertisements i have on there are leaderboards, so when viewed from a mobile device twentyeleven resizes to fit the browser, and the leaderboard advertisements do not; so i have the ads just hanging out on the right side of the screen in mid air. = my frustration.

    SO, what i came up with (with my very limited and self taught knowledge of php) was this,

    ill use a php mobile device detection script: “is_mobile.php”

    <?php
function is_mobile() {

	// Get the user agent

	$user_agent = $_SERVER['HTTP_USER_AGENT'];

	// Create an array of known mobile user agents
	// This list is from the 21 October 2010 WURFL File.
	// Most mobile devices send a pretty standard string that can be covered by
	// one of these.  I believe I have found all the agents (as of the date above)
	// that do not and have included them below.  If you use this function, you
	// should periodically check your list against the WURFL file, available at:
	// https://wurfl.sourceforge.net/

	$mobile_agents = Array(

		"240x320",
		"acer",
		"acoon",
		"acs-",
		"abacho",
		"ahong",
		"airness",
		"alcatel",
		"amoi",
		"android",
		"anywhereyougo.com",
		"applewebkit/525",
		"applewebkit/532",
		"asus",
		"audio",
		"au-mic",
		"avantogo",
		"becker",
		"benq",
		"bilbo",
		"bird",
		"blackberry",
		"blazer",
		"bleu",
		"cdm-",
		"compal",
		"coolpad",
		"danger",
		"dbtel",
		"dopod",
		"elaine",
		"eric",
		"etouch",
		"fly " ,
		"fly_",
		"fly-",
		"go.web",
		"goodaccess",
		"gradiente",
		"grundig",
		"haier",
		"hedy",
		"hitachi",
		"htc",
		"huawei",
		"hutchison",
		"inno",
		"ipad",
		"ipaq",
		"ipod",
		"jbrowser",
		"kddi",
		"kgt",
		"kwc",
		"lenovo",
		"lg ",
		"lg2",
		"lg3",
		"lg4",
		"lg5",
		"lg7",
		"lg8",
		"lg9",
		"lg-",
		"lge-",
		"lge9",
		"longcos",
		"maemo",
		"mercator",
		"meridian",
		"micromax",
		"midp",
		"mini",
		"mitsu",
		"mmm",
		"mmp",
		"mobi",
		"mot-",
		"moto",
		"nec-",
		"netfront",
		"newgen",
		"nexian",
		"nf-browser",
		"nintendo",
		"nitro",
		"nokia",
		"nook",
		"novarra",
		"obigo",
		"palm",
		"panasonic",
		"pantech",
		"philips",
		"phone",
		"pg-",
		"playstation",
		"pocket",
		"pt-",
		"qc-",
		"qtek",
		"rover",
		"sagem",
		"sama",
		"samu",
		"sanyo",
		"samsung",
		"sch-",
		"scooter",
		"sec-",
		"sendo",
		"sgh-",
		"sharp",
		"siemens",
		"sie-",
		"softbank",
		"sony",
		"spice",
		"sprint",
		"spv",
		"symbian",
		"tablet",
		"talkabout",
		"tcl-",
		"teleca",
		"telit",
		"tianyu",
		"tim-",
		"toshiba",
		"tsm",
		"up.browser",
		"utec",
		"utstar",
		"verykool",
		"virgin",
		"vk-",
		"voda",
		"voxtel",
		"vx",
		"wap",
		"wellco",
		"wig browser",
		"wii",
		"windows ce",
		"wireless",
		"xda",
		"xde",
		"zte"
	);

	// Pre-set $is_mobile to false.

	$is_mobile = false;

	// Cycle through the list in $mobile_agents to see if any of them
	// appear in $user_agent.

	foreach ($mobile_agents as $device) {

		// Check each element in $mobile_agents to see if it appears in
		// $user_agent.  If it does, set $is_mobile to true.

		if (stristr($user_agent, $device)) {

			$is_mobile = true;

			// break out of the foreach, we don't need to test
			// any more once we get a true value.

			break;
		}
	}

	return $is_mobile;
}
?>

    then put this into the header.php

    <?php
get_is_mobile(); ?>

    then since my advertisement is in the header, i would put this nearly at the end of the header.php

    <?php
	if (is_mobile()) {
		get_mobilead();
}
	else {
		get_regularad();
}
?>

    and get_mobilead() refers to my mobilead.php

    <div id="adbelowheader" style="text-align: center;">Advertisement<br><script type="text/javascript"><!--
google_ad_client = "PRIVATE";
google_ad_slot = "PRIVATE";
google_ad_width = 320;
google_ad_height = 50;
//-->
</script>
<script type="text/javascript"
src="https://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>

    and get_regularad() refers to regularad.php

    <div id="adbelowheader" style="text-align: center;">Advertisement<br><script type="text/javascript"><!--
google_ad_client = "PRIVATE";
google_ad_slot = "PRIVATE";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="https://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>

    Any help? Please?

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter wrexsti

    (@wrexsti)

    i just thought of this, is it required to register new pages that i make, like “regularad.php”, in another file somewheres?

    so i have to register the new php file in a list so i would be able to call for it in a “get_regularads()” command?

    Lets change what you have slightly, put the ads into different classes and turn them on and off with display: block; and display: none; !

    <div class="ad-320">Advertisement<br><script type="text/javascript"><!--
google_ad_client = "PRIVATE";
google_ad_slot = "PRIVATE";
google_ad_width = 320;
google_ad_height = 50;
//-->
</script>
<script type="text/javascript"
src="https://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>

    And

    <div id="ad-banner">Advertisement<br><script type="text/javascript"><!--
google_ad_client = "PRIVATE";
google_ad_slot = "PRIVATE";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="https://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>

    Then in style.css

    .ad-banner {
 	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.ad-320 {
 	clear: both;
	display: none;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 727px) {
   .ad-320 {
      display: block;
   }
   .ad-banner {
      display: none;
   }
}

    That should work without any need for the script!

    HTH

    David

    Thread Starter wrexsti

    (@wrexsti)

    ive been researching…

    must a register a new .php file in the functions.php in order for me to add a “get” code for it to display? i believe it is called a hook, is a hook what i need?

    Thread Starter wrexsti

    (@wrexsti)

    thank you very much for your reply David

    i will let you know how it comes out, as i am editing my code right now.

    Thread Starter wrexsti

    (@wrexsti)

    im sad to report that while it does correctly hide the mobile ads on the desktop and iPad, the iPhone displays BOTH the large banner and the mobile banner on the iPhone, thus i am still in search for a fix ??

    Thread Starter wrexsti

    (@wrexsti)

    im an idiot. im sorry for doubting you david.

    I had a <div id instead of <div class

    Thread Starter wrexsti

    (@wrexsti)

    THANK YOU SO MUCH DAVID!!!!

    Great,
    I have just tested it with a twenty eleven child theme, resizing the browser, and had to adjust the styles with a media width of 805 this allows for the 40px of margin, and changes the ad with no overflow.

    /* These two blocks hold our adverts */
.ad-banner {
 	clear: both;
	display: block;
	text-align: center;
	padding: 20px 0;
}
.ad-320 {
 	clear: both;
	display: none;
	text-align: center;
	padding: 10px 0;
}

@media (max-width: 805px) {
   .ad-320 {
      display: block;
   }
   .ad-banner {
      display: none;
   }
}

    The only issue with this method is it takes up two of the three allowed adsense spots.

    I will be using this on my own website, I changed from the 468 to square ads because of mobile devices, so I will add 468 into the mix and create a post on how to add it to a twenty eleven child theme.

    Can you mark this topic as resolved please.

    David

    Thread Starter wrexsti

    (@wrexsti)

    now i run into the issue of the Google adsense 3 ad limit per page.
    i now have technically 4 ads on the page.

    its setup so i had 1 ad on the top under the nav bar, and 1 ad on the bottom under the content.

    since the page loads 4 ads now, even though 2 dont show up from the css hiding them, one of the devices loses an ad (based on ad code placement – which ad code comes first in the source)

    so im going to have to eliminate an ad, which in my opinion the mobile/320 is getting the axe as i expect less traffic to that version.

    EDIT: we wrote at the same time lol

    Thread Starter wrexsti

    (@wrexsti)

    good idea, now that i lose a mobile add i will switch my mobile 320 ads to a square ad.

    I am having the same issue but with a picture element instead of ad. I am nto a programmer. The responsive theme will change according to media type but the Panopress (Plugin to display panoram picture does not). This code displays all the different sizes:
    [media version=”desktop”]desktop [pano file=”qbb/virtualtour.html” width=”890″ height=”400″][/media]
    [media version=”tablet”]tablet [pano file=”qbb/virtualtour.html” width=”660″ height=”320″][/media]
    [media version=”mobile”]mobile [pano file=”qbb/virtualtour.html” width=”270″ height=”200″][/media]
    [media version=”mini”]mini[pano file=”qbb/virtualtour.html” width=”195″ height=”150″][/media]

    How can I get it to display once size based on media type?

    Thanks
    Mike

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘twentyeleven mobile site resize error advertisements’ is closed to new replies.