CODEWITHSUNDEEP
htmlmobileweb
hunterp
hunterp

Reputation: 15976

Why is header overlapping in mobile browser?

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

Upvotes: 0

Views: 420

Answers (2)

Sagar Patil
Sagar Patil

Reputation: 1948

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.

Upvotes: 1

alonisser
alonisser

Reputation: 12068

you should use various responsive design tricks. like setting the: meta viewport tag, @media queries adjusted css. specifing the margin and sizes in the header with % or em instead of px of other set sizes etc. you could use js libraries like syze and projects like html5boilerplate to help you with this.

Upvotes: 1

Related Questions