[Resolved] Responsive problems with some banners

[Elio Martinez]

Hi,

I have some problems with the responsive look in smartphones because of the 728×90 banner that I have put on a GP Hook before content. What can I do to solve this? > http://www.nbamaniacs.com/ (no every 728×90 banner gives problems, try to load several posts until you find the problem).

Thanks.

[Adrian Cojocariu]

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;
}
}

[Tom]

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 🙂

[Elio Martinez]

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?

[Adrian Cojocariu]

Add

text-align:center;

After each display:none;

Hope that works.

[Elio Martinez]

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.

[Adrian Cojocariu]

They look pretty good to me, mobile and PC.

Can you screen shot one that looks bad ?

[Elio Martinez]

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

[Adrian Cojocariu]

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

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;
}
}

[Elio Martinez]

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.

[Adrian Cojocariu]

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.

[Elio Martinez]

At this moment everything of this topic seems ok 🙂

[Tom]

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 🙂

[Elio Martinez]

Hi,

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

[Adrian Cojocariu]

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

Try

width:30%;
margin:0 auto;

[Author]

Posts