CODEWITHSUNDEEP
cssmobileheight
Smara Hr
Smara Hr

Reputation: 1

Height issue on mobile device

I am coding a website for mobile. It's the first time that I have done this so I don't know what I am doing wrong.

Everything is ok if the text fits the height of the page, but when it's higher than the height of the mobile screen, the page gets messed up (it adds padding to the right of the page and I have some white space there).

I tried

body { height: auto }

and

body { height:100% }

I'm sure I'm doing something wrong. Please help. Thanks

Upvotes: 0

Views: 828

Answers (1)

kqlambert
kqlambert

Reputation: 2711

I believe your problem is because the screen is being auto fitted because the size is off, to avoid this you should insert this handy piece of code at the top of your page 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

it gets rid of the auto fitting of some mobile browsers. Mozilla has an example here.

Also take a look at responsive css media queries, as they are (in my opinion) the best way to handle mobile. Brad Frost is an excellent person to learn about responsive design.

hope that helps.

Upvotes: 1

Related Questions