Question

How can I make the header area not overlap at http://androdevlab.com when viewed in a mobile browser?

Answer 1

You should use media queries. You can read more about media queries here:

http://www.w3.org/TR/css3-mediaqueries/

http://reference.sitepoint.com/css/mediaqueries

http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

You can also use plugins like FitText.js – http://fittextjs.com/

Looking at the code for your site in Firebug, the main issue is that the line-height of the line ‘A portable lab in NYC of Android devices delivered to your door’ is too big. It’s currently at ‘1.8’ without a value. Try setting it to a smaller value of maybe 1em or 1.25em. Likewise for the nav-primary li a class.

Also, the width of the nav element is defined as 980px so on any device, this would be a fixed value. Maybe you can try setting a % or em based value.

If you need to change many elements for the mobile version while keeping the @screen CSS the same, you should use media queries. Makes things much easier to handle.