1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Responsive banner [CSS]

Discussion in 'CSS' started by milos112, Aug 16, 2015.

  1. #1
    Hey you!:)

    So... I wanted to make a website for my mom's motel rental. Everything was going well until she said, that it looked weird on her phone. I learned some basics on responsive design, to use "PERCENTS" (%) not PIXELS (px) and others..

    There is a big banner picture taking up the full width (100%), but when you open the website on a mobile device it shrinks terrifyingly ! The rest of the website becomes huge in comparison to the BANNER picture, that shrinks to fit 100% on the screen. I have been struggling how to fix this for days.

    Is there anything to do, to make it bigger ( or switch it with another picture ) ?

    Do you guys think you could help me!?
    Matt S.
    SEMrush
     
    milos112, Aug 16, 2015 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,401
    Likes Received:
    1,876
    Best Answers:
    245
    Trophy Points:
    515
    #2
    Good rule of thumb? Full width banners are inaccessible bandwidth wasting crap that have no business on a website in the first place, and are artsy fartsy bull usually used by "designers" who know jack ***** about HTML, CSS or accessibility making them unqualified to be designing a blasted thing.

    Solution? Lose the banner. There's a reason I don't put them on websites (just as I no longer use dropdown menus).

    Also remember that percents are for font sizes, don't use them for layout (like column widths) as they're too fragile and look like rubbish at certain sized -- to that end you're better off sticking with EM for such things so it's elastic.

    Really though without seeing the site in question it's hard to weigh in more; but think on this, what exactly are you expecting some massive banner garbage to even do on a tiny screen? Remember that side-scrolling/panning is rubbish and the antithesis of accessible design. Are you even using media queries for it to be properly responsive?

    The "rest of the website becomes huge" part is troubling -- makes me think your media queries (if any) are flawed or you failed to make the site semi-fluid and elastic BEFORE adding the queries.
     
    deathshadow, Aug 16, 2015 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    Simple solution: lose the banner image if viewed on a smaller screen. It might work on a desktop, but on a cell-phone, it'll probably both be expensive (data-wise) and useless.
     
    PoPSiCLe, Aug 21, 2015 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,462
    Likes Received:
    1,396
    Best Answers:
    24
    Trophy Points:
    400
    #4
    I did something one time that worked for me. It's a crazy thing to do, but it may still work for someone who REALLY REALLY wants to have a banner ad showing on a cell phone. Simply stop the shrinking with a min-width. So your CSS will be:

    .image {
    width: 100%;
    height: auto;
    min-width: 560px;
    }
    Code (markup):
    Your banner should be designed with the texts and graphics aligned to the left hand side since a small portion of the banner's right side will be hidden on a cell phone in vertical position. No one will even know that it's out of view, though. Again, it's not recommended and crazy, but if your mom really wants it there, that's one way you can do this.
     
    qwikad.com, Aug 21, 2015 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,401
    Likes Received:
    1,876
    Best Answers:
    245
    Trophy Points:
    515
    #5
    Adding overflow:hidden to a parent wrapper would also make sure the that when it's bigger than the available space it's chopped off, so as to not mess up the rest of the layout or cause counter-intuitive sideways scrolling.

    But as you said, it's not recommended and you'd be better off just losing the banner entirely.
     
    deathshadow, Aug 21, 2015 IP