I am currently working on incorporating a 320x50 mobile ad into the mobile version of my website. The goal is to have the ad fill the entire width of a mobile device. However, the issue I'm facing is that the ad appears small and does not stretch across the entire width of my iPhone; furthermore, it scrolls along with the content.
To implement the mobile CSS on my webpage, I am using the following code:
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile2.css" />
Upon inspecting the CSS, I tried the following code snippet:
div#mobilead {
width:100%;
}
My objective is to ensure that the ad remains fixed at the bottom of the screen even when scrolling. If you have any suggestions or solutions, they would be greatly appreciated. Thank you!
As requested, here is the complete code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile2.css" />
</head>
<body>
<div id="mobileB">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- TWF_mobile_banner_adsense -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:50px"
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="6479374699"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</body>
</html>
Below is the relevant CSS section:
#mobileB {
position: absolute;
bottom:0;
left:0;
z-index: 99;
width:100%;
height:50px
}
}