Adsense: serving different ad sizes on different devices - adsense

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.

Related

Adsense "Auto Ads" force CLS Layout Shift

we use the Adsense "Auto Ads" and are generally very happy with it. Unfortunately we have a problem with the CLS (Cummulative Layout Shift) on our mobile (!) site. We have now tested this out and the problems are definitely triggered by the Auto Ads. After further testing, we were able to determine that it is specifically the sticky anchor ads in the header area of the page that trigger the CLS. Important: the shift does not happen when loading the page, but when scrolling down and up after the anchor ad has appeared at the top. At this point Adsense add some style attributes to all elements on our page, eg. "height: auto !important;" Does anyone also have this problem? What can we do? We would not like to go on without the sticky anchor ads. Important: Problem is mobile only! Is Google Adsense working on this? Thank you!
as google ads (especially the top anchor one) is ANIMATING the PADDING on BODY after you scroll down the page, the ad appears, and you scroll up, there is no way to avoid the CLS, only to create fixed
<style>
body {
padding: 120px 0px 0px !important;
}
</style>
so the once the ad appends its "style" with padding to body and starts to change it, nothing will happend due to "!important" tag in our style ... you can make an IF statement to use this only if your page is displayed on mobile (not sure this happens on wide PC anchors as well, have to test it, but I see my CLS going down on PC as well, so might be)
As there is no real way to "force" the size of auto ads in adsense
Set max height of Adsense responsive ad unit
for me i found out google allways delivers 300px high ads on mobile phones while 280px on tablets and desktop so i "reserve" this space in my responsive layout above the fold
with CSS as described here https://support.google.com/adsense/answer/9183363?hl=de here https://support.google.com/adsense/answer/9467650?hl=en-GB and here https://support.google.com/adsense/forum/AAAAKDuOfxQTiihLH_gMnw/?hl=en&gpf=%23!topic%2Fadsense%2FTiihLH_gMnw
.werbung { height: 300px; }
#media (min-width:800px) { .werbung { height: 280px; } }
#media (min-width:500px) { .werbung { height: 280px; } }
example:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-#####"
crossorigin="anonymous"></script>
<div class="werbung">
<ins class="adsbygoogle werbung"
style="display:block"
data-ad-client="ca-pub-#####"
data-ad-slot="#####"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
We had the same problem with Adsense injecting style: auto !important; - it was breaking our scroll and causing menus to display off screen on our mobile pages.
We solved it through the use of a little javascript that allows Adsense to load its ads with style: auto !important; and the script will quickly re-assign your div style back to how you need them to allow your page to operate normally. You can view the article here
Hope it helps.

What css can I use to crop image on the fly in an email template?

how to crop image for email template? I have an image that is of particular width (example 520px). I want to ensure that the height is never more than 150px. This is for email only... If I use max-height or just height css, then it gets pixelated? What other better option do I have?
Ideally, you would crop the image (either manually or programmatically), and have it stored somewhere (on a CDN), where you can embed the image, and it will display as intended.
If this ^ isn't an option, your limitations are based on what email clients you need to support.
I am using Campaign Monitor CSS as a reference.
Option 1: If you aren't concerned with supporting Outlook.com and/or Outlook 2007/10/13, you could set the image as a background property on an element as such:
<div style="
width: 520px;
height: 150px;
background-image: url(http://placehold.it/520x520)">
</div>
Here we are using a 520x520 (square) image, and setting the parent element to the desired size (520x150 as per your example).
Now you are faced with the issue of positioning the image background. As per the guide, if you attempt positioning, you will lose Gmail, which is probably a deal breaker. However, as an exercise, you could do this:
<div style="
width: 520px;
height: 150px;
background-image: url(http://placehold.it/520x520);
background-position: 50%;>
</div>
Now you've got an image positioned (centered), at your desired size. on an element.
Option 2: Is also limited to a specific set of clients. You could feasibly use position: relative, on the wrapper, and position: absolute, on the tag. Then use top, left properties to position.
Of course, you lose Yahoo, in addition to Outlook and Gmail.
HTML emails are tricky. I'm sure there are several other options out there. I hope this response gets you pointed in the right direction.
With various mail clients having limited support for html and CSS attributes you're going to have to have trouble achieving a cropped image affect using vanilla CSS and HTML techniques.
The following is supported by most mail clients other than Outlook and Outlook.com
<div style="
width: 520px;
height: 150px;
background-image: url(http://placehold.it/520x200.jpg)
"></div>
Unfortunately most mail clients have no support for clip, overflow:hidden or background-clip.
Even an embedded image has very little support. Send a base64 image in HTML email
The best solution would be to render a copy of the image as you need it without any CSS trickery. This is the only real solution to your problem.

CSS Standard Browsers vs. iPhone or mobile devices : two box models? trick example

This should intrigue CSS specialists. Here is a situation where I experimented two different behaviors for the box model support :
On one side :
All standard browsers (IE, Chrome, Firefox, Opera, etc., from IE7+, etc., and even Safari for iPad or iPhones with iOS6+)
On the other side :
Some mobile browsers (tested iPhone/iPod, and on Samsung Galaxy Ace (Android) devices).
Here is the HTML
<div class="parent">
<div class="floatright">Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent </div>
<div class="nofloat">Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content </div>
</div>
CSS
.parent {
background: yellow;
width: 400px;
height: 200px;
}
.nofloat {
background: pink;
float: none;
margin-right: 20px;
overflow:hidden;
}
.floatright {
background: orange;
float: right;
width: 200px;
margin: 0;
padding: 0;
}
You can test it here : http://jsfiddle.net/Kyk2P/1/
Now here is the story :
In standard browsers, the .nofloat element spans the full width of its parent, because it is not floated. The .floatright element floats "over" it on its right side and for this reason, pushes its content to the left. The property overflow: hidden; does one more trick: instead of having the text wrapping the floated element, it stays in a column on the left. The floated element technically only pushes the "content" of the .nonfloat container, not the container itself, which has the following result : no margin is therefore visible, as it is applied to the right of the .nofloat container which is actually "covered" by the floated element. This is the normal result one would expect.
On an iPod (iOS5) or Samsung Ace device, the result is different. It seems like the The .nofloat element only fills the room in the parent container that is left empty after the .floatright has been floated to the right. Result : the container itself finds a narrower context in which to apply its margins and wedges on the floated element. In this case, we get a margin between the content (in fact, the container...) and the floated element.
An image being better than words, here is what happens :
My questions are :
Is this normal?
What way should the CSS rule be expressed so that we get the same result (preferably case #1) in both cases?
--- EDIT ---
Thanks to Angelin, I know now that iPhones with iOS6 get Case#1. However, iPhones with previous iOS and Android phones do get case#2. Nightmare!
According to CSS2.1 spec, this is a situation with undefined exact behavior. Since the .nofloat block has overflow:hidden, it establishes the new block formatting context. The spec says the following about this situation:
The border box of a table, a block-level replaced element, or an
element in the normal flow that establishes a new block formatting
context (such as an element with 'overflow' other than 'visible')
must not overlap the margin box of any floats in the same block
formatting context as the element itself. If necessary,
implementations should clear the said element by placing it below any
preceding floats, but may place it adjacent to such floats if there is
sufficient space. They may even make the border box of said element
narrower than defined by section 10.3.3. CSS2 does not define
when a UA may put said element next to the float or by how much said
element may become narrower.
So I believe this is normal. Both behaviors don't contradict the spec. While desktop and tablet browsers tend to use as much horizontal space as available, mobile browsers tend to make text blocks narrower in order to make it easier to read them on small screens. I believe that there is nothing to 'fix' in this behavior, but if you need more consistent display, you can use other layout models (e.g. display: table-* or Flexbox) instead of floats.
You can specify different CSS rules depending on the size of the view. Sounds like the systems have different methods of rending the CSS so you might have to be more specifc with these:
http://dev.w3.org/csswg/css-device-adapt/#viewport-descriptors

Width of content not filling mobile screen

I am trying to make my design mobile friendly. What I have is that everything fits nicely when I look at the design on http://ipadpeek.com/ (Great Tool!) although when I actually view it through my iPhone 4 the content only takes up around 80% of the page, whereas the remaining 20% is a white background.
There is only one element which appears to fit the whole width and this has the following style:
<div class="text-elements">
<h2>Your website can achieve...</h2>
</div>
.text-elements {
float: none;
margin: 0;
padding: 75px 10px;
h2 {
font-size: 4em;
width: 100%;
}
}
Any ideas why this is happening?
FYI most of the online iPad style tools such as http://ipadpeek.com/ don't tend to pick up any of these overflow issues anyways.
In the end I found that the issue was at least one or more divs which had explicit widths set, but which were quite hard to find as culprits!
Tips for anyone else with this problem:
If you know any design will be responsive, use max-width: Xpx, width: 100%, in your main stylesheets on any explicit width divs to avoid them becoming a culprit in later course.
When using width: 100% on items, make sure you add any additional padding to the inner div (especially if it is in pixels), or account for it such as width: 95%, padding: 2.5%.
Try overflow: hidden on some of the main wrappers which hold your content to see where issues are coming from.

Center align fluid layout

How do I center align fluid layout (no fixed px values, only % values) for multiple screens ?
i.e. I am going to view the same HTML on desktop (can be multiple resolutions), can be mobile (e.g. iPhone) OR even a tablet (e.g. iPad).
I think the following solutions would not work in my case;
Using width:100% (there won't be any space left to center align)
Using widdth:80% or so and then using margin:0 auto (this would
work fine on desktops, but would waste space on mobile devices..i.e i
want to optimize limited space on mobile devices)
Using text-align:center (I want to center align the layout and not
the text)
Please suggest.
<div style="width:100%; text-align:center;">
<img style="margin:auto; display:block;" src="images/web_banner.gif"/>
<p>Website coming soon…</p>
</div>
Use align="center" in div then u will get content in div will center
It's extremely difficult to set a page unless it's just text to be completely liquid. Just because images need to be displayed at a certain size and then would need to be re-sized to fit smaller resolutions. That being said if this is just a text based site then the
width: 80%;
margin: 0 auto;
text-align: center;
iphone supports the the margin so this should work fine. If you have images and need to resize then you should really look at a jquery or javascript to adjust the images on resize.
Also use the text-align: center for backwards compatibility. Use all of that as a wrapper and then set for you content and navigation
text-align: left;