Responsive problems with some banners

Yes I can see the problem, the banners get out of the edge of the screen.

It might just be an Android Chrome problem, I've seen that recently.

If you have android, do you use any screen rotation software ?

Try it on other phones too, or with another mobile browser.

Just for a simple solution that comes to my head ...

Find or create two separate banners, one fit for bigger screens, one fit for smaller screens.

In GP Hooks create two divs

<div class="bigscreen">big banner code here</div>
<div class="smallscreen">small banner code here</div>

Then add this code to Simple Custom CSS plugin ( if you don't have it yet, install it, and you can find it under Appearance in the Wordpress dashboard ).

@media (max-width:768px) {
.bigscreen {
display:none;
}
}
@media (min-width:769px) {
.smallscreen {
display:none;
}
}

The above is probably your best bet - showing large ads on desktop and small ads on mobile.

If you're using Google Adsense, they have a responsive ad unit which works great as well :)

Hi,

I have tried what Adrian said, and it works.

But I have the same problem as previous: sometimes the banner is not centered, is on the left side. What can I do?

Add

text-align:center;

After each display:none;

Hope that works.

Adrian,

I am having the same problem in the header: sometimes is centered, sometimes not. I have the same banners in the footer (in widget) and that banner always is centered.

They look pretty good to me, mobile and PC.

Can you screen shot one that looks bad ?

Sure. Here it is: http://i.imgur.com/gAHE4Eu.png

What an ad that is ! Look Tom, they are copying you :D

Ugly fake theme

What browser are you using ?

I really think it's a adsense problem ... that code has css in it or something overwriting the theme's code...

Not really sure what's on your end, but I'm being honest I did refresh about 20 times... and no problem.

Let's try width and margin 0 auto

@media (max-width:768px) {
.bigscreen {
display:none;
width:100%;
margin: 0 auto;
}
}
@media (min-width:769px) {
.smallscreen {
display:none;
width:100%;
margin: 0 auto;
}
}

I am using the same css code that you wrote for small-bigscreen on the banner of the footer. It is ok to use the code on both banners (header-footer).

I have uploaded the new the css right now.

If the footer is doing fine and you have no problems, leave it as it is.

It shouldn't be a problem though. If you see it has any glitches or look bad, just add the previous code. Honestly, I think it's something to do with the respective ad.

Is the problem on Mobile/Tablet Only ?

Or is your screenshot from PC ?

Once again, what browser are you using ? Mozilla Firefox ? Chrome ? InternetExplorer ? Opera ? Safari ?

I think the problem is on your end, check it with this tool on all sizes, rotate screens, and hit refresh until you see the ad.

http://quirktools.com/screenfly/#u=http%3A//nbamaniacs.com&w=1280&h=800&a=24

If it's centered, the problem is on your device, if it's not centered, it might be a problem with the ad.

But all the adds I see are centered.

At this moment everything of this topic seems ok :)

It doesn't look like your ad is wrapped in the bigscreen class.

If you wrap it in a custom div, and then apply the margin: 0 auto that Adrian suggested, it should work :)

Hi,

I have the banner wrapped in a div with align="center", but sometimes the superior banner still appers at left, not centered. Ideas?

Really don't know... I still just see them all centered.

Try

width:30%;
margin:0 auto;