Text and elements won't scale with browser window size? - html

Question

I am working on my final project for my intro to HTML and CSS class.
I am building a very simple website, and everything seemed to be going alright until I wanted to see how the page looks when I resize the browser window. The page looks fine until any sort of resizing is done, and then all of the elements start to get really messed up.
I am a complete noob and have been stuck trying to fix this for almost an hour now. I'm not really sure what to do. I'm trying to make the elements scale until a certain minimum width, but I fear ive built the whole website wrong from the beginning..
Here is the code, if someone could give some insight I would be very grateful..
#wrapper {
height: 1000px;
margin: 0 auto;
background-color: black;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: 100%;
position: relative;
}
#header {
height: 150px;
position: absolute;
background-color: red;
width: 100%;
}
#welcome {
left: 75px;
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
font-family: courier;
position: absolute;
font-size: 64pt;
left: 20px;
bottom: 0px;
color: #fff;
margin: 0;
line-height: 1;
}
#main-nav {
position: absolute;
bottom: 0;
right: 0;
}
#main-nav ul li {
float: left;
}
#main-nav ul li a {
color: #fff;
display: inline-block;
padding: 20px;
text-decoration: none;
font-family: courier;
font-size: 24pt;
white-space: no-wrap;
}
#main-nav ul li a.current {
font-weight: bold;
font-size: 28pt;
}
#main-nav ul li a:hover {
color: #ffb0ac;
}
#main-content {
position: relative;
width: 100%;
height: 500px;
}
.intro {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: courier;
font-size: 36pt;
color: #fff;
}
.button {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<h1 class="w">Welcome</h1>
</div>
<nav id="main-nav">
<ul>
<li><a class="current" href="#">Home</a></li>
<li>Introduction</li>
<li>Keys</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="main-content">
<h1 class="intro">Basic Music Theory Introdution</h1>
<img class="button" src="images/button.jpg" alt="button">
</div>
</div>
<!-- End of wrapper-->

Answer 1

Your elements are all using fixed pixel sizes in css. you have other options there, you can set elements to percentage of viewport width (50vw) or height (50vh), or just a percentage (50%). If percentage is used inside of another element it will be scaled to that element not the browser window.
Also - you have pt sizes in your css. those dont exist in css and would need to be changed to px. There are various calculations out there for converting pt size to other units.
for example I've copied your snippets below and changed a few sizes to use viewport width (vw) viewport height (vh) and percentages. your css could be like this:
#wrapper {
height: 100vh;
margin: 0 auto;
background-color: black;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: 100%;
position: relative;
}
#header {
height: 30vh;
position: absolute;
background-color: red;
width: 100%;
}
#welcome {
left: 5vw;
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
font-family: courier;
position: absolute;
font-size: 15vw;
left: 20px;
bottom: 0px;
color: #fff;
margin: 0;
line-height: 1;
}
#main-nav {
position: absolute;
bottom: 0;
right: 0;
}
#main-nav ul li {
float: left;
}
#main-nav ul li a {
color: #fff;
display: inline-block;
padding: 20px;
text-decoration: none;
font-family: courier;
font-size: 4vw;
white-space: no-wrap;
}
#main-nav ul li a.current {
font-weight: bold;
font-size: 28pt;
}
#main-nav ul li a:hover {
color: #ffb0ac;
}
#main-content {
position: relative;
width: 100%;
height: 500px;
}
.intro {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: courier;
font-size: 36pt;
color: #fff;
}
.button {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<h1 class="w">Welcome</h1>
</div>
<nav id="main-nav">
<ul>
<li><a class="current" href="#">Home</a></li>
<li>Introduction</li>
<li>Keys</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="main-content">
<h1 class="intro">Basic Music Theory Introdution</h1>
<img class="button" src="images/button.jpg" alt="button">
</div>
</div>
<!-- End of wrapper-->