I want to use Adsense on my website for the first time, I encountered some problems in the start stages. I want to use the advertisement with the size manually written in the size space ( width:height ).
Display ads - image
Here I chose manual size for advertising link
width : 300px; | height : 250px;
Google Adsense says that fixed advertising cannot be responsive: Note that fixed-sized display ad units don’t dynamically change their size or respond to changes in screen orientation.
Finally my question, it is possible to create more ads from large to small from the beginning but with the change of the device to hide the advertising that is not adaptive
example > computer > html : <div class="div1"> </div> <div class="div2"> </div>
example > computer > css : .div1{display: block; width: 300px; height: 250px;} .div2{display:none}
And if device = tablet
CSS
#media only screen and (max-width: 425px) {
.div1 {
display: none;
}
div2 {
display: block;
width: 250px;
height: 250px;
}
}
The meaning of the post is if I can hide an ad from google adsesn on different devices.
!!!standard ad will be 300px X 250px if the device is less than 425px for the standard ad to write display none but for another ad that was hidden for the computer to write display block
Google adsense display fixed
Although there isn't a "proper" solution to this, i.e. not one that is using AdSense units the way they were intended to be used by Google, there is a practical workaround that I have been using for years on one of my sites, and that to my knowledge is in line with their policies (they have never complained to me about it.)
The workaround is to use Google's responsive ads, placing them inside divs with fixed widths but variable (unspecified) heights, and using CSS to hide the div's containing the ads if the browser width is outside a certain range. To make this work:
Make sure exactly one div displays for a particular screen width.
(Optional but recommended) set margin: auto; on each div so that it centers itself horizontally in the layout.
Set each div with a fixed width, but do not specify its height. This is because Google's responsive ads may serve ads of different heights so you must leave it flexible.
Make sure the div disappears if the screen width gets sufficiently narrow, because you don't want Google serving a fixed-width ad that is truncated because of your layout, that could violate policies.
You can then have up to three "sets" of such divs, and as long as only one div from each set is visible at a time, you will be in line with Google's 3 ad units per page limit. If a window is resized and it reaches a breakpoint in the CSS and triggers a display of a different div size, the ad will simply disappear until the page is reloaded.
How to code the media queries? I recommend only the max-width constraint...it's the property you need, you don't need to look at screen or anything else. E.g. here is some of my code:
div.container_320
{
margin: auto;
width: 320px;
display: none;
}
#media (max-width: 650px) { div.container_320 { display: block; } }
#media (max-width: 354px) { div.container_320 { display: none; } }
Then you can have:
<div class="container_320">
<! –– put adsense code here ––>
</div>
And this will achieve one of your divs. The div will appear only in a fixed range of widths; otherwise it will be hidden.
Then you need to make the others for whatever sets of different widths you want for the different max-widths of the user's browser. Put all div's of a set right after each other in the HTML. You can have as many such divs as you want, but I have found that usually having 3 is sufficient to optimize revenue while keeping the layout looking nice. Use Google Analytics or other data you have to look at the screen widths of people actually viewing your site.
You will need to adjust the dimensions and break points to fit your desired dimensions and layouts. Also, keep in mind the standard ad widths, and optimize that for your revenue. If you set the width to a non-standard size, you will find Google often serves very small ads with a lot of empty padding around them, and this is going to both look poor and forgo revenue because you're displaying in a small fraction of your available space.
It seems jQuery mobile and iframes don't play well.
Firstly, we know iframes are a bad idea - but in this case, we need to use it to load a form into our page - that has jQuery Mobile touch functions enabled.
Now, this works fine on all desktop devices, but on iOS - it seems when you select a form field that's in the iframe - and scroll - the form field loses focus and you can no longer enter text (even though the iOS keyboard is still visible). This is is a bit of a problem when there's a Captcha field in the form and users need to scroll to review the passphrase.
Any solution to this would be greatly appreciated! Thanks!
In ios Scroll bars in iframes are removed and render them as blocks. What I did for this solution is wrapping the Iframe inside a div and let the Iframe expand according to
<div id="myIframeParentDiv" class="myIframeParentDivClass">
<iframe style="z-index:2000" id="myIframe" width="100%" height="100%" src="" frameborder=0 ALLOWTRANSPARENCY="true" >
<p>Booking Engine error! your browser does not support iframes.</p>
</iframe>
</div>
STYLES
#myIframeParentDiv{
height: 100%;
width: 100%;
overflow:auto;
-webkit-overflow-scrolling: touch;
}
I am writing an iPhone app that has some Xpages included in the app. In Xpages I am using the Single Application Page and then Application Pages. They work fairly slick.
However, in my first page I am getting a 44px space that I do not want. I noticed that there is CSS that causes this:
.mblView {
padding top: 44px !important;
}
I have a picture of how it looks here:
http://www.flickr.com/photos/28998410#N06/
How can I override that css so that I don't get that horrible looking bar at the top.
Any help would be greatly appreciated.
Bryan
The 44px padding is there because the design expects a heading before the content. The heading needs 44px space. Here's a simple example where the heading is included:
<xe:appPage id="appPage1" pageName="homePage" resetContent="false">
<xe:djxmHeading id="homePageHeading" label="Heading"></xe:djxmHeading>
<xe:djxmRoundRectList id="djxmRoundRectList1">
Content
</xe:djxmRoundRectList>
</xe:appPage>
You can create your own custom css with the following content and add it as a stylesheet resource to your XPage. This should override the standard CSS:
.mblView {
padding-top: 0px !important;
}
I'm developing iPad html5 webpage that needs to display pages from other origins (different domains).
I'm loading those pages into iframe, and scrolling the iframe using the iOs5 new scrolling ability, as shown in the code below.
<div id="myDiv" style="height: 1185px; width: 100%; overflow:scroll; -webkit-overflow-scrolling: touch;">
<iframe id="myIframe" src="http://http://css-tricks.com/forums/discussion/11946/scrolling-iframe-on-ipad/p1"></iframe>
</div>
The problem is that the off-screen iframe content is not becoming visible when scrolling to it (the frame is blank).
How can I overcome this issue and provide scrollable iframe solution?
OK. found the solution.
apparently, the problem appear when the main document height is shorter than the iframe that is scrolled.
the parts of the iframe page, that exceed the document height, are not rendered.
So, under my needs, I could solve the problem by adding such a js (with jquery) code:
<script>
$(function() {
var iframe = $("#myIframe");
iframe.load(function() {
$("body").height(iframe.height());
});
});
</script>
If you have an access to iFrame body, apply some transform3d to its content to enable GPU rendering.
In my case adding -webkit-transform: translate3d(0, 0, 0); to main wrapping div did the job.
I am creating a responsive website, and have just noticed a strange behaviour in my content pages when viewed on the iPhone. It scales correctly when loaded in portrait mode, and also when rotated to landscape. However, when rotating back to portrait the page seems to shift left, or not zoom correctly, and there is a strip of white space down the right-hand side. This white space also seems to be present on first loading in portrait as the user can swipe the page left
Rather than complicating the explanation any further, here's a link to a sample page where this behaviour is occurring. Have a look on an iPhone, then have a look at the home page which does not have this issue.
If you need to see anything further, just me know :)
Fixed it! The issue was coming from one particular div - to find it, it was a process of deleting the different elements until the issue went away.
To fix it I needed to add overflow-x: hidden to that div and it sorts it out! Hope this is useful to others with a similar issue.
I had the same problem, I fixed it by setting:
html, body { width:100%; overflow:hidden; }
This problem occurs when width of any division is greater than the width of iPAD's screen.
In my case, some divisions were having size of 1000px, so I just went for width:auto and it works. overflow-x:hidden also does the same thing, but is not a preferred way.
I don't have an iphone to test this on but I have come across something similar with websites I've created in the past. In my case its because there was a bug in safari mobile that messed with the scale when going from port to land.
The following code fixed it for me (can't remember where I got it from at the moment)
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
Using "overflow-x: hidden" solves part of the problem, but screws the scroll, acting with strange behaviors (as Jason said).
Sometimes, the hardest part is to discover what is causing the problem. In my case, after a few hours, if found that the problem was in Twitter's Bootstrap:
If you're using Twitter's Bootstrap with "control-group" zones for your forms, the problem could be there. In my case i solved the problem with:
.control-group .controls {
overflow-x: hidden
}
Now the white space on the right was gone :)
I'd like to add to Navneet Kumar's solution because it worked for me. Any div tag styled with width=100% cannot also have left or right padding. The mobile browsers (I noticed the problem on iPhone and Android devices) interpret the div as having a width greater than 100%, thereby creating the extra space on the right side. (I knew this regarding fixed widths, but not percentage widths.) Instead, use width=auto in conjunction with padding.
I know it's a while since this topic was opened but I came across a similar situation and found it was because I had an element with the following properties right: -999999px; position: absolute; hidden off screen.
Changing the above to left: -999999px; position: absolute; solved the same issue the OP had (white screen to the right and ability to swipe right).
I'm using Bootstrap 3.3. I tried all of these solutions, and nothing worked. Then, I changed my <div class="container"> to <div class="container-fluid"> in the section that I was having trouble with. This solved the problem.
I tried all what has been suggested here, nothing works. Then I've relized that it connect with scale of page. So then I added <meta name="viewport" content="width=device-width, initial-scale=1.0"> to header.php in my main theme's folder and it 's fixed problem.
Seems as though results are varying for different circumstances but a sitewide
html, body { width:100%; x-overflow:hidden; }
seems to have worked for me!
Fixed!
Had a similar problem. Fixed it by setting the width to a current device width.
body, html {
max-width: 100vw;
margin: 0 auto;
overflow-x: hidden;
}
SOLVED ¡¡
Since installing protostar joomla template 3.X and start adding content in the module K2 I noticed that annoying scroll with a blank space on the right side, visible especially in iphones.
A correct partial answer was gave for Eva Marie Rasmussen, adding to the body tag in the file template.css these values:
width: auto;
overflow-x: hidden;
But this solution is only partial.
Search div class or label that is causing this problem and once detected add to that class in the file templete.css the same values:
width: auto;
overflow-x: hidden;
In my case add to the class "span" these two lines to finally look like this:
[Class * = "span"] {
float: left;
min-height: 1px;
margin-left: 20px;
width: auto;
overflow-x: hidden;
And it´s working now¡¡