trouble fitting my css fit all sizes of computer screens - html

Question

I made a website on my computer but then when I loaded it on my laptop I noticed the sizing was off on everything. However, it still looks fine on my computer. I know this may be a good lesson learned in css, but in the time being do you think any of you could take a look at my css file?
#cool_animate {
border-top: 10px solid gray;
border-bottom: 4px solid gray;
height: 195px;
background: url(images/scape.png) repeat-x;
-webkit-animation: move-city 15s infinite linear;
}
#-webkit-keyframes move-city {
0% { background-position: 0 0;}
100% { background-position: -256px 0;}
}
#boat {
height: 239px;
position: absolute;
top: -10px;
left: 200px;
-webkit-animation: wind 300s infinite linear;
}
#-webkit-keyframes wind {
from { left: 400px}
to { left: 1400px}
}
#-webkit-keyframes cloud {
from { left: 260px}
to { left: 280px}
}
#cloud {
height: 90px;
position: absolute;
top: 28px;
left: 300px;
-webkit-animation: cloud 9s infinite alternate linear;
}
#copter {
height: 90px;
position: absolute;
top: 28px;
left: 1700px;
-webkit-animation: copter 15s infinite alternate linear;
}
#-webkit-keyframes copter {
from { left: 1700px}
to { left: 1600px}
}
header {
font-size: 22px;
color: white;
background: linear-gradient(#C7E2EE, #0099CC);
font-family: 'Lobster', cursive;
box-shadow: 5px 5px 3px 4px gray;
border-radius: 10px; /* this makes it rounded */
padding: 40px 40px;
border: 1px black solid;
border-width: 1px 1px 1px 1px;
border-color: black;
margin: 50px 470px;
margin-bottom:0px;
height: 200px;
}
img.right {
position: relative;
top: -16px;
right: -200px;
}
#inside_p {
display:inline;
}
#cool_nav {
margin: 190px 160px 40px 140px;
font-family: 'Lobster', cursive;
color: black;
position: absolute;
z-index: 7;
left: 0;
width: 204px;
top: 72px;
font-size: 24px;
line-height: 1.2;
}
#facts_nav {
background-color: rgb(211, 211, 211);
margin: 700px 160px 40px 180px;
color: black;
position: absolute;
z-index: 7;
left: 0;
width: 204px;
top: 72px;
font-size: 17px;
line-height: 1.2;
border: 1px black solid;
border-width: 1px 1px 1px 1px;
border-color: black;
border-radius: 10px;
padding: 26px 20px;
}
body {
background: linear-gradient(#69D1FF, white);
}
#cool_nav p {
background-color: #30C722;
border-radius: 7px;
}
#cool_nav p:hover {
background-color: #3DB0E6;
color: #ffffff;
width: 160px;
border-radius: 30px;
}
ul {
list-style-type: none;
}
#example li:hover {
background-color: #82C0DB;
}
#toot li:hover {
background-color: #82C0DB;
}
#intro li:hover {
background-color: #82C0DB;
}
#main_content {
font-size: 0px;
color: black;
background-color: rgb(255, 209, 124);
font-family: 'Lobster', cursive;
border-radius: 10px; /* this makes it rounded */
padding: 1px 40px;
border: .5px black solid;
border-width: 1px 1px 1px 1px;
border-color: black;
margin: 50px 470px;
margin-top:.5px;
margin-bottom: 0;
height: 400px;
}
#cool_div {
font-size: 19px;
color: white;
background-color: rgb(255, 113, 255);
font-family: 'Lobster', cursive;
box-shadow: 5px 5px 3px 4px #999;
border-radius: 10px; /* this makes it rounded */
padding: 1px 40px;
border: .5px black solid;
border-width: 1px 1px 1px 1px;
border-color: black;
margin: 50px 470px;
margin-top: 0px;
height: 200px;
margin-bottom: 0
}
#fun_times:hover {
content: url('images/batman.jpg');
height: 140px;
width: 150px;
}
#cool_footer {
font-size: 22px;
color: white;
background-color: rgb(74, 255, 74);
font-family: 'Lobster', cursive;
box-shadow: 5px 5px 3px 4px #999;
border-radius: 10px; /* this makes it rounded */
padding: 1px 40px;
border: .5px black solid;
border-width: 1px 1px 1px 1px;
border-color: black;
margin: 50px 470px;
margin-top: 0px;
top-margin: 0px;
height: 200px;
}
a:link {
-webkit-transition: .2s;
transition: .2s;
}
a:hover {
color: hsl(209, 100%, 32%);
}
.btn {
-moz-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
box-shadow:inset 0px 1px 0px 0px #ffe0b5;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fbb450), color-stop(1, #f89306));
background:-moz-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-webkit-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-o-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-ms-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:linear-gradient(to bottom, #fbb450 5%, #f89306 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89306',GradientType=0);
background-color:#fbb450;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #c97e1c;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:17px;
font-weight:bold;
padding:6px 11px;
text-decoration:none;
text-shadow:0px 1px 0px #8f7f24;
}
.btn:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f89306), color-stop(1, #fbb450));
background:-moz-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-webkit-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-o-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-ms-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:linear-gradient(to bottom, #f89306 5%, #fbb450 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f89306', endColorstr='#fbb450',GradientType=0);
background-color:#f89306;
}
.btn:active {
position:relative;
top:1px;
}
}
not sure if it matters really but here is my html file also
<!DOCTYPE html>
<html>
<!-- this is the start of my head -->
<head>
<title>Rails Tutorial</title>
<!-- js and css sheets -->
<script src="cool.js"></script>
<script src="jquery.js"></script>
<link href="cool.css" rel="stylesheet">
<link href="animate.css" rel="stylesheet">
<!-- my favicon for top of page -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon" title="A super fun rails tutorial">
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
<!-- HEADER -->
<div>
<h1 id="cool_animate"></h1>
<img src="images/cool.png" id="boat">
<img src="images/cloud.png" id="cloud">
<img src="images/copter.png" id="copter">
</div>
</head>
<!-- this is the end of my head -->
<body>
<!-- this is the start of my header -->
<header class="animated swing">
<div <div style="width:200px; float:left;">
<img src="images/study.png " width="140" height="120" title="LEARNING IS FUN!">
</div>
<h1 id="cool_h1">Welcome aboard!</h1>
<p>This is a simple tutorial site to help you learn and get more confortable with programming in Rails. I made this for people who are just getting started and are considering learning how to program.</p>
</header>
<!-- this is the end of my header -->
<!-- this is the start of my link nav -->
<nav id="cool_nav" class="animated tada">
<ul>
<li id="toot">
<p>tutorial</p>
<ul>
<li>level one</li>
<li>level two</li>
<li>level three</li>
</ul>
</li>
<li id="intro">
<p>Introduction</p>
<ul>
<li>about Ruby</li>
<li>about Rails</li>
<li>about Erb</li>
</ul>
</li>
<li id="example">
<p>Examples</p>
<ul>
<li>example 1</li>
<li>example 2</li>
<li>example 3</li>
</ul>
</li>
</ul>
</nav>
<!-- this is the end of my nav -->
<!-- this is the start of fun facts nav -->
<nav id="facts_nav">
<code>
<p>what does MVC stand for?</p>
<p>many view controller</p>
<p>model view controller</p>
<p>method via controller</p>
<button>show answer</button>
<div style="display: none">
<p>model view controller</p>
</div>
</code>
</nav>
<script>
$( "button" ).click(function() {
$( "div" ).show( "slow" );
});
</script>
<!-- this is the end of my fun facts nav -->
<!-- this is the start of my main section -->
<section id="main_content" class="animated shake">
<button id="go" class="btn">Table of contents</button>
<div id="block">
<h1>1: Tutorial</h1>
<p>The rails tutorial that I made has 3 levels and each level has its own set of challenges.</p>
<h2>2: Introduction</h2>
<p>this introduction will tell you about ruby a programming language, rails the
platform that is build off of ruby, and about Embedded Ruby in our html.</p>
<h2>3: Examles</h2>
<p>Here I will give you three examples of working rails programs that I built.</p>
</div>
</section>
<!-- this is the end of my main section -->
<script>
$( "#go" ).click(function() {
$( "#block" ).animate({
// width: "70%",
// opacity: 0.4,
marginLeft: "30px",
fontSize: "17px",
borderWidth: "4px"
}, 1500 );
});
</script>
<!-- this is the start of cool div -->
<div id="cool_div">
<div>
<p></p>
</div>
<div <div style="width:200px; float:left;">
<a href="http://cheatermoves.github.io/" id="fun_times">
<img src="images/me.jpg" width="150" height="140">
</a>
</div>
<div style="width:400px; float:left;">
<p class="speech">Click on my photo to view my website or follow me on twitter. Always looking forward to sharing new tweets.</p>
</div>
<div style="width:150px; float:right;">
<a href="https://twitter.com/lanners_cool">
<img src="https://si0.twimg.com/profile_images/2284174758/v65oai7fxn47qv9nectx.png" width="140" height="120">
</a>
</div>
</div>
<!-- this is the end of cool div -->
<!-- this is the start of cool footer -->
<footer id="cool_footer">
<p>Here are some helpful links to help you learn rails</p>
<ul>
<li><small>Hartl tutorial</small</li>
<li><small>Getting started with rails</small></li>
<li><small>Rails Casts intro video</small></li>
</ul>
</footer>
<!-- this is the end of cool footer -->
</body>
</html>

Answer 1

The problem is related to your sizing of elements.
Set your widths and heights to percentages. As well as your "left" and "top". That way, your layout becomes responsive.
Set your font-sizes to ems. For example:
font: 1em helvetica, arial, sans-serif;