CODEWITHSUNDEEP
css
methuselah
methuselah

Reputation: 13216

Getting elements to fit from a vertical perspective when page is resized

How would I get the elements on my page to fit vertically when the page is resized?

Right now it works horizontally up until a certain point, but how would I do it for devices with different height orientations? It would be nice if the elements could dynamically resize or something.

Code below:

<div id="topPane">
        <h1 id="georgeLogo">Logo</h1>
    <div id="login">
        <div id="facebookLoginButton">Continue with Facebook</div>
        <br class="lb">
        <div class="center">or</div>
        <br class="lb">
        <input type="text" placeholder="Email Address" required>
        <br class="lb">
        <input type="text" placeholder="Password" required>
        <br class="lb">
        <div id="standardLoginButton">Login</div>
        <br class="lb">
        <div id="copyright">© Copyright 2014</div>
    </div>


    <div id="bottomPane">
        <div id="loginPane">Login</div>
        <div id="registerPane">Sign Up</div>
    </div>

Jsfiddle: http://jsfiddle.net/3bcbstn6/

Upvotes: 1

Views: 61

Answers (1)

OfekA
OfekA

Reputation: 58

Try to use media queries, for example min-height and max-height in combination with units like vhwhich are relative to the window height, example:

@media only screen and (max-height: 550px) {
    #georgeLogo {
        font-size: 14vh;
    }
    #login {
        margin-top: 8vh;
    }
    .lb {
        line-height: 4vh !important;
    }
}
@media only screen and (max-height: 400px) {
    #georgeLogo {
        font-size: 14vh;
    }
    #login {
        margin-top: 2vh;
    }
    .lb {
        line-height: 1vh !important;
    }
}

Jsfiddle: http://jsfiddle.net/h30c863e/1/

More information and examples here: http://css-tricks.com/viewport-sized-typography/

Upvotes: 1

Related Questions