[Resolved] Responsive problems with some banners

Home Forums Support [Resolved] Responsive problems with some banners

Home Forums Support Responsive problems with some banners

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #115646
    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.

    #115694
    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;
    }
    }
    
    #115704
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #115911
    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?

    #115941
    Adrian Cojocariu

    Add

    
    text-align:center;
    

    After each display:none;

    Hope that works.

    #116076
    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.

    #116119
    Adrian Cojocariu

    They look pretty good to me, mobile and PC.

    Can you screen shot one that looks bad ?

    #116154
    Elio Martinez

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

    #116162
    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;
    }
    }
    
    #116163
    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.

    #116170
    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.

    #116200
    Elio Martinez

    At this moment everything of this topic seems ok πŸ™‚

    #116207
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #119542
    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?

    #119571
    Adrian Cojocariu

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

    Try

    
    width:30%;
    margin:0 auto;
    
Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.