Grow your CSS skills. Land your dream job.

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

  • # November 14, 2012 at 10:28 am

    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

    # November 14, 2012 at 10:48 am

    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.

    # November 14, 2012 at 10:58 am

    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

    # November 14, 2012 at 11:02 am

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

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

    # November 14, 2012 at 11:04 am

    Of course I appreciate that.

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

    THanks

    Kai

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".