how do make a page that is responsive & always fill the page width ways and height

[kaimotta]

Hi everybody

I am currently building an android app using phonegap using HTML5 and CSS3.

The client wants the app to fit always within the screen, be responsive and have no scrolling.

Thankfully it must only be in portrait.

I’m having problems building it so it always fits within the screen on all different media, from 320 px wide smartphones to tablets at 1280 pixels wide.

I have tried approaching this using just percentages, but find fonts dont grow or get bigger with the natural changing size of the page as the divs do. Also I’m finding it hard to size a div in percentages within a div that is sized with percentages.

Any ideas or thoughts much appreciated…

Thanks

[Paulie_D]

No scrolling…but what if the content is taller than the viewport height?

It sounds that though you need to start with a sticky footer technique (even if there is nothing in the footer) but that’s not going to help with the scrolling issue.

If you solve that problem then media queries will probably solve the rest.

[kaimotta]

Hi Paulie

Well, the person who designed, designed it to fit a 320px wide screen. This is fine, I made it fit that perfectly but then when I started building the media queries up, it fell to pieces because of the difference between width vs height…

I’ll look at sticky footer, thanks

[Paulie_D]

Without seeing it in action it’s tough to help.

If you could put the relevant parts in Codepen we might make a start.

[kaimotta]

Of course I appreciate that.

I’ve just got to finish another project today but will post on here friday ok?

THanks

Kai

[Author]

Posts