Responsive banner [CSS]

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.

 

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.

 

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.

 

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.

 

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.