My sticky footer displays weirdly on bigger or smaller screens, how do I make these elements to scale?

Question

The elements I am reffering to are the footer links here: http://individual.utoronto.ca/andrewlouis

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Andrew Louis' Portfolio</title>
    <link rel="stylesheet" href="fonts/stylesheet.css" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="javascript/jqueryscript.js"></script>

<body>

    <h2>Andrew Louis</h2>

    <div class="centered">
        Coming Soon.
        <div id = "subheading">
            <a href="http://andrewlouis.posterous.com">Click here to go to my blog in the meantime.</a>
        </div>
    </div>




</body>
</head>
</html>

Relevant CSS:

#footer {position:relative;}

#heading{
    font-family:'Lobster1.3Regular';
    color:#D04D21;
    position: absolute;
    font-size:80px;
    top: 10%;
    left: 0px;
    width: 100%;
    height: 1px;
    text-align:center;
    text-shadow: 0 0 2px rgba(0,0,0,0.9);
}

.nav_wrapper{
    min-height: 50px;
    width: 100%;
    position: absolute;
     bottom:-500px; ; left:0px;
}

#list_orientation li a {
    text-decoration:none;
    text-align:center;
    color:black;

}
#list_orientation li{
    display:inline-block;
    padding:50px;
    height:50px;width:50px;
    text-align:center;
    width:20%;

Answer 1

They seem to be line breaking as they are wider than the page wrap. You could give the elements smaller width and height values with media queries?

My sticky footer displays weirdly on bigger or smaller screens, how do I make these elements to scale?

Question

1 answers

solution1
1 2012-06-24 18:15:59

My sticky footer displays weirdly on bigger or smaller screens, how do I make these elements to scale?

Question

1 answers

solution1 1 2012-06-24 18:15:59

solution1
1 2012-06-24 18:15:59