Home/ Questions/Q 8135437
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T10:25:06+00:00

I just made my first website , and I notice that the elements start

  • 0

I just made my first website, and I notice that the elements start to look weird and clumped together if the browser window gets too small or so. I was wondering how to make the elements scalable

Relevant HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Andrew Louis, University of Toronto</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>
    <script src="javascript/popup.js"></script>
    <script language="JavaScript">
        var i = 0;

        imageObj = new Image();

        images = new Array();

        images[0] = "images/book-black.png";
        images[1] = "images/male-black.png";
        images[2] = "images/telephone-black.png";

        //Start preloading
        for (i = 0; i<=2; i++)
        {
            imageObj.src=images[i];
        }
    </script>
<body>

        <div id="heading"> 
            <span class="border">Andrew Louis</span>
            <div id = "subheading">
            <p> <br /><b>Andrew</b> is a big fan of grandiose ideas that propel change, imaginative software,<br /> innovative web design, and caffè americanos.</p>
            </div>
        </div>

        <!-- <div id="footer">      -->
            <div class="nav_wrapper">
                <ul class = "Fade" id="list_orientation">               
                    <li id="about"><a href="AboutMe.html"><img src = "images/male.png" height = '50' width = '50' /></a></li>
                    <li id="port"><a href="Portfolio.html"><img src = "images/book.png" height = '50' width = '50' /></a></li>
                    <li id="contact"><a href="Contact.html"><img src = "images/telephone.png" height = '50' width = '50' /></a></li>
                </ul> 


            </div>
        <!-- </div> -->



</body>
</html>

Relevant CSS: 

.Chunk{
    font-family:'ChunkFiveRomanRegular';
}

.Museo{
    font-family:'MuseoSlab500Regular';
    font-size:20px;
}


.nav_wrapper {
    position:fixed;
    color:#000;
    left: -100px;
    right: 0px;
    bottom: 0px;
    text-align:center;
    height:225px;
    /*background:white;
    border-style:dotted;*/
}

.global_nav{
    position:fixed;
    float:bottom;
    padding:5px;
    color:#000;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align:center;
    height:17px;
    font-size:10px;
    background:white;
}

#portfolio_text{
    text-align:center;
}

#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);
}

.border{
    border-top: 1px solid #D04D21;/*#000000;*/
    border-bottom:1px solid #D04D21;/*#000000;*/
    padding:20px;
}

.rounded_border{
    border:2px dashed;
    padding:10px 40px; 
    border-radius:25px;
}

body{
background:#FFFFFF;
}

#subheading{
    font-family:'MuseoSlab500Regular';
    text-align:center;
    font-size:25px;
    text-shadow: 0 0 1px rgba(0,0,0,0.1);
}


#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%;
    margin-left:3%;
}


.Fade img{
    border-style:dotted;
    /*  opacity:0.4;
    padding:10px;
    padding-bottom:20px;*/
    background:white;
    border-color:#D04D21;


    padding: 2em 2em 2em 2em;
    -moz-border-radius: 5em;
    -webkit-border-radius: 5em;
    border-radius: 5em;
}

.Fade img:hover{
    background:#D04D21;
    border-color:white;
}

#pup {
  position:absolute;
  z-index:200; /* aaaalways on top*/
  text-align:center;
  font-family:'ChunkFiveRomanRegular';
  padding: 3px;
  margin-left: 10px;
  margin-top: -5px;
  width: 120px;
  border: 1px solid black;
  background-color:white;
  color: #D04D21;
  opacity:0.9;
  font-size: 1em;/*0.95em;*/
}

.Entypo{
    font-family:'EntypoRegular';
    font-size:100px;
}


a{
text-decoration:none;
color:#D04D21;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This can vary a lot depending on the effect you want to create.

    The easiest way would be to set the min-height and min-width of the body (or a new top level div) and have the user scroll in a smaller browser window.

    Most solutions you will come up with will probably involve messing around with these min-height and min-widths of various elements!

    However, a ‘better’ solution would be to avoid position: absolute or fixed. These do not scale well. Try using padding and margin on divs to get the desired effect instead.

    • 0