CSS design looks weird on iPad and small devices


I recently redesigned my company website. It is 1050 px wide and looks okay on most screens.

On very small screens (less than 1024 px width), most notably the iPad, it looks a bit odd though. I’ve attached a screenshot.

On the right side the light blue repeating background is missing.

Can someone tell me how to fix the design so it looks good on smaller devices as well?

Thanks for any help.

That’s a common problem, and the way I deal with it is to place a min-width on the wrappers. E.g.

#banner-wrap, #content-wrap {min-width: 1050px;}


O, and you should put width: 100% on there too, to give old IE haslayout.

#banner-wrap, #content-wrap {min-width: 1050px; width: 100%;}

This was explained in this thread:

Hey Ralph,

This works great, thanks a lot for your help!