Metro Mystery – How to prevent banner overlapping logo in smaller screens?

Community Forums Forums Design Tips and Tricks Metro Mystery – How to prevent banner overlapping logo in smaller screens?

This topic is: not resolved

This topic contains 3 replies, has 4 voices, and was last updated by  Marco 1 year, 7 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #30885

    Metro
    Participant
    Post count: 25

    Hi,

    I’m working on a closed site, so no link at the moment, but does anyone know how to prevent a 728×90 header widget area banner from overlapping the 300×90 logo when viewing the site on smaller devices? It would be nice to have the logo drop down below the banner ad in smaller screens, or at least be visible somewhere.

    Do I need to edit the @media css?

    Cheers.

    #37731

    cehwitham
    Participant
    Post count: 396

    It sounds like editing the styles under the media queries is the way forward or setting a max width on the image so that it doesn’t overlap. Unfortunately without a link or a screenshot it’s hard to advise more.

    Chris


    Twitter: cehwitham Web: cehwitham.com

    #38700

    ri001
    Participant
    Post count: 10

    i’m also having this issue

    #38703

    Marco
    Participant
    Post count: 63

    Smaller devices (iPhones etc) cannot display smoothly a 728px wide banner ( they are 320, 480, 568, 600px wide ).
    There are plenty of articles on the web that deals the responsive ads issues.

    Anyway you could try to add in the
    `/* iPads (portrait) ———– */

    @media only screen and (max-width: 768px) {`

    section, something like this:

    `#header .widget-area {margin-top: 3rem;} `

    setting the top margin accordingly to your logo height.


Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.