I am making a landing page and I made it using bootstrap columns, and this is how it look like fullscreen:
And this is what it looks like when i try resizing it to half-screen:
This is probably bootstrap trying to make the site mobile, is there a way to turn this off?
My code:
<!DOCTYPE html>
<html>
<head>
<title> title</title>
<link href="style.css" rel="stylesheet" type="text/css" >
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8 header">
<div class="row title-row" >
<div class="col-md-1" >
</div>
<div class="col-md-3 left">
</div>
<div class="col-md-7">
<h1>A title</h1>
</div>
<div class="col-md-1">
</div>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</body>
</html>
body {
margin: 0;
background-image: url('img/bg6.jpg');
background-repeat: no-repeat;
background-size: 100% auto;
background-color: #e1e1e1 !important;
}
.header {
margin-top: 5vw;
height:60vh;
background-color: white;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}
.title-row {
padding-top: 5vw;
}
.left {
background-image: url(http://www.top13.net/wp-content/uploads/2014/11/blue-small-flower-555.jpg);
background-repeat: no-repeat;
background-size: 100%;
height: 40vh;
}
Related
I have a page with using bootstrap container and rows which for the best part works ok. some of the columns have CSS circles to use as gauges.
I have problem with the last column of a row which when I add div boxes with in the panel div I have made and then adding text to the div's it pushes all the other columns to increase there sizes.
With out the text and just the divs it is all ok. I can't work out a way to stop this
This is a screen shot with no text added as you can see the gauge looks ok
This is the code
body {
height: 100%;
}
#container {
margin: 1% 1% 1% 0%;
padding: 5px;
background: black;
background-size: cover;
}
.panel {
margin: 0% 0% 85% 0%;
width: 100%;
height: 100%;
background: rgba(0, 0, 255, 0.5);
border-radius: 10px;
}
.weatherpanel {
margin: 0% 0% 0% 0%;
width: 100%;
height: 100%;
background: rgba(0, 0, 255, 0.5);
border-radius: 10px;
}
.gaugeTitle {
text-align: center;
color: white;
font-size: 3vw;
}
.outerGauge {
margin: 10% 0% 0% 13%;
/*top right bottom left */
border-radius: 50%;
width: 60%;
height: 60%;
background: black;
box-shadow: 0 0 0 5px red;
position: absolute;
}
.innerGauge {
margin: 8% 0% 0% 7%;
/*top right bottom left */
border-radius: 50%;
width: 85%;
height: 85%;
background: green;
box-shadow: 0 0 10px 4px green;
position: absolute;
}
.gaugeText {
margin-top: -5%;
text-align: center;
color: black;
font-size: 7vw;
}
.stocks {
margin: auto;
height: 10%;
color: white;
font-size: 2vw;
border: solid;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
<title>Dashboard</title>
</head>
<body>
<div id="container">
<div class="row">
<div class="col-sm-4">
<div class="weatherpanel">
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-sm-4">
<div class="panel">
<div class="gaugeTitle" id="wateTitle"></div>
<div class="outerGauge">
<div class="innerGauge" id="water">
<div class="gaugeText" id="waterGauge">
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel">
</div>
</div>
<div class="col-sm-4">
<div class="panel">
<div class="stocks" id="TCG">text</div>
<div class="stocks" id="AA">text</div>
<div class="stocks" id="ABF">text</div>
<div class="stocks" id="STOB">text</div>
<div class="stocks" id="MCLS">text</div>
<div class="stocks" id="BA">text</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="jquery-3.1.0.min.js"></script>
<script src="newindex.js"></script>
</body>
</html>
Below links is a test server with the test page without text
http://motorhomertestsite.ddns.net/newIndex.html
and the next link with text added
http://motorhomertestsite.ddns.net/withText.html
Got it working by removing the 85% margin from panel class. Which works on this part but means I will need to create a new class for the rest of the page which was using this class
.panel {
margin: 0% 0% 85% 0%;
width: 100%;
height: 100%;
background: rgba(0, 0, 255, 0.5);
border-radius: 10px;
}
This question already has answers here:
Why doesn't height: 100% work to expand divs to the screen height?
(12 answers)
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
I'm trying to get the container div to stretch to the full height of the parent. As you can see the parent (body) has the info color and the container has the primary color. The color of the container should stretch over the color of the parent, but its not. I just used colors to help identify what section of my html was not stretching to the full height of the page. Below is the source
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body class="body bg-info">
<div class="container-fluid bg-primary">
<div class="row">
<div class="col-md-4">
<div class="info-stats">
Image Id:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Status:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Endpoint:
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info-logs">
Logs:
</div>
</div>
</div>
</div>
</body>
</html>
and the css file
.body {
background: #eeeeee;
}
.info-stats {
background: #ffffff;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
height: 25%;
width: 100%;
margin-top: .5%;
}
.info-logs {
background: #ffffff;
height: 50%;
width: 100%;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
margin-top: 1%;
}
.container-fluid {
height: 100%;
}
appreciate the help!
The reason is that your html and body tag are not strechted to be full height. You should style them like this:
html, body {
height: 100vh;
}
Here is a working codepen
You can't use min-height as it won't work with .container-fluid {height:100%}.
Note: Don't use background color for finding html elements! Instead use inspect element and hover your mouse over html elements.
Elements with 100% height only expand to the height of their parent elements. Add 100% height to the html and body tags:
html,body{
height: 100%;
}
While you're at it, get rid of the height from .info-stats and .info-logs:
html,body{
height: 100%;
}
.body {
background: #eeeeee;
}
.info-stats {
background: #ffffff;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
width: 100%;
margin-top: .5%;
}
.info-logs {
background: #ffffff;
width: 100%;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
margin-top: 1%;
}
.container-fluid {
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<body class="body bg-info">
<div class="container-fluid bg-primary">
<div class="row">
<div class="col-md-4">
<div class="info-stats">
Image Id:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Status:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Endpoint:
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info-logs">
Logs:
</div>
</div>
</div>
</div>
</body>
</html>
Try this... set height: 100%; for .info-stats and .info-logs
.body {
background: #eeeeee;
}
.info-stats {
background: #ffffff;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
height: 100%;
width: 100%;
margin-top: .5%;
}
.info-logs {
background: #ffffff;
height: 100%;
width: 100%;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
margin-top: 1%;
}
.container-fluid {
height: 100%;
}
<html>
<head>
<meta charset="utf-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body class="body bg-info">
<div class="container-fluid bg-primary">
<div class="row">
<div class="col-md-4">
<div class="info-stats">
Image Id:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Status:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Endpoint:
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info-logs">
Logs:
</div>
</div>
</div>
</div>
</body>
</html>
I'm using http://erikflowers.github.io/weather-icons/ to display weather icons on my page. However, after inserting the cdn. It doesn't work.
https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css the icon has a class of "wi-wom-200" taken from http://erikflowers.github.io/weather-icons/api-list.html since I'm using openweathermap.com for my api. Any help on how to display this icon. Openweahtermap provides their own icons, but very low resolution. Thanks
/*
stylesheet for weather app
*/
body {
background-image: url("../img/city_vector.jpg");
min-height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
}
/* background color on top of bg image*/
.hero {
position: absolute;
min-height: 100vh;
min-width: 100vw;
top: 0;
bottom: 0;
background-color: rgba(31, 34, 118, 0.5);
z-index: -5;
}
/* navbar */
.navbar {
background-color: rgb(69, 106, 171);
}
.navbar a {
color: white;
font-size: 25px;
}
/* weather section */
.weather {
border: 1px solid white;
height: 30rem;
margin-top: 10rem;
/*background-color: rgba(160, 167, 187, 0.5);*/
background-color: rgba(0, 0, 0, 0.5);
/*background-color: rgba(213, 193, 193, 0.5);*/
border-radius: 20px;
color: white;
}
.weather-head {
height: 50%;
}
#weather-icon {
height: 7rem;
width: 7rem;
}
.weather-body {
height: 50%;
border-top: 1px solid white;
padding-top: 0.5rem;
}
#description {
/*border: 1px solid white;*/
font-size: 2rem;
/*margin-top: 2rem;*/
}
#temperature {
/*border: 1px solid white;*/
font-size: 7rem;
}
span {
font-size: 3rem;
}
<!DOCTYPE html>
<html>
<head>
<title>Weather App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<div class="hero">
<!-- navbar -->
<nav class="navbar">
<a class="navbar-brand" href="#">
<!-- <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> -->
<i class="fa fa-sun-o" aria-hidden="true"></i>
<strong>Local</strong>Weather
</a>
</nav>
<!-- weather section -->
<div class="container">
<div class="row">
<div id="" class="col-8 mx-auto weather">
<div class="weather-head">
<h2 id="location" class="text-center"></h2>
<div class="row">
<div id="description" class="description col-6 text-center">
<i class="wi wi-wom-200"></i> Thunderstorm
</div>
<div id="temperature" class="col-6 text-center">
</div>
</div>
<div class="weather-body">
<div class="row">
<div class="humidity col-4">
<div class="lead text-center">Humidity</div>
</div>
<div class="wind col-4">
<div class="lead text-center">Wind Speed</div>
</div>
<div class="wind-degree col-4">
<div class="lead text-center">Wind Direction</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You have not included the icons cdn link. Use this
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css">
And then use wi-owm-200 class for the icon
body {
background-image: url("../img/city_vector.jpg");
min-height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
}
.hero {
position: absolute;
min-height: 100vh;
min-width: 100vw;
top: 0;
bottom: 0;
background-color: rgba(31, 34, 118, 0.5);
z-index: -5;
}
.navbar {
background-color: rgb(69, 106, 171);
}
.navbar a {
color: white;
font-size: 25px;
}
.weather {
border: 1px solid white;
height: 30rem;
margin-top: 10rem;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 20px;
color: white;
}
.weather-head {
height: 50%;
}
#weather-icon {
height: 7rem;
width: 7rem;
}
.weather-body {
height: 50%;
border-top: 1px solid white;
padding-top: 0.5rem;
}
#description {
font-size: 2rem;
}
#temperature {
font-size: 7rem;
}
span {
font-size: 3rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css">
<div class="hero">
<nav class="navbar">
<a class="navbar-brand" href="#">
<i class="fa fa-sun-o" aria-hidden="true"></i>
<strong>Local</strong>Weather
</a>
</nav>
<div class="container">
<div class="row">
<div id="" class="col-8 mx-auto weather">
<div class="weather-head">
<h2 id="location" class="text-center"></h2>
<div class="row">
<div id="description" class="description col-6 text-center">
<i class="wi wi-owm-200"></i> Thunderstorm
</div>
<div id="temperature" class="col-6 text-center">
</div>
</div>
<div class="weather-body">
<div class="row">
<div class="humidity col-4">
<div class="lead text-center">Humidity</div>
</div>
<div class="wind col-4">
<div class="lead text-center">Wind Speed</div>
</div>
<div class="wind-degree col-4">
<div class="lead text-center">Wind Direction</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm currently working on putting together a very basic site and using CSS/ Bootstap. I am unable to figure out however why my columns are stacking on each other. I've looked through Stack Overflow and the official bootstrap documentation and as far as I can see, it should be working: I am looking to create three equal columns underneath the "about me" header that span the page.
<!DOCTYPE html>
<html lang="en">
<title>Testing | </title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Bootstrap Core CSS-->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Copse|Cutive|Lora:700|Sanchez|Scope+One|Slabo+27px|Trocchi|Vesper+Libre" rel="stylesheet">
<style>
header {
text-align: center;
background: url('sunlightthroughgrass.jpg');
background-size: cover;
color: black;
width: auto;
height: auto;
}
a {
color: white;
}
h1 {
font-family: 'Vesper Libre', serif;
font-size: 70px;
}
img {
max-width: 400px;
max-height: 400px;
margin: 40px 0px 0px 0px;
border: 7px solid white;
border-radius: 20px;
width: auto;
height: auto;
}
ul {
text-align: center;
padding: 10px;
background: rgba(0, 0, 0, 0.5);
}
li {
display: inline;
padding: 0px 10px 0px 10px;
}
<!-- article {
max-width: 500px;
padding: 20px;
margin: 0 auto;
}
#media (max-width: 500px) {
h1 {
font-size: 36px;
padding: 5px;
}
li {
padding: 5px;
display: block;
}
}-->
</style>
</head>
<body>
<div class="container-fluid">
<header>
<img src="robin.jpg">
<h1>Test Person|Testing</h1>
<ul class="nav nav-pills">
<li>About Me
</li>
<li>Resume
</li>
</ul>
</header>
<div class="row">
<div class="col-lg-4">
Test Test Test
<div class="col-lg-4">
Nother Test
<div class="col-lg-4">
Third Nother Test
</div>
</div>
</div>
</div>
<!-- SCRIPTS GO UNDER HERE -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<!--Anti-Spam-->
<script type="text/javascript" src="js/obscure.js"></script>
You are nesting your col-lg-4 divs, do it like this instead:
<div class="row">
<div class="col-lg-4">
Test Test Test
</div>
<div class="col-lg-4">
Third Nother Test
</div>
<div class="col-lg-4">
Third Nother Test
</div>
</div>
I'm trying to design google play like webpage design (Mobile version). I'm using CUSTOM GRID SYSTEM (12 col 0.5% margin). The problem is that body color is appearing over header section (I think so, maybe its a different problem). I want to make it look/scroll like this:
Example image of google play mobile
Here is the code:
**
You may need to zoom to 250% or landscape max width:640px to view the
design.
**
body {
margin: 0px;
padding: 0px;
font-family: Roboto;
background: #eeeeee;
}
html {
margin: 0px;
padding: 0px;
}
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
.top {
height: auto;
margin: auto;
font-family: Roboto Light;
}
.nav {
height: 40px;
width: 100%;
position: fixed;
background: #4caf50;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}
.nav a:link,
.nav a:visited {
font-size: 20px;
width: auto;
padding: 5px;
margin: 5px;
text-decoration: none;
color: white;
text-align: center;
}
.nav a:hover,
.nav a:active {
background-color: #388e38;
}
.header {
background: url(https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg) center center fixed;
height: 70%;
width: 100%;
}
a {
text-decoration: none;
}
.container {
margin: 5%;
background: white;
}
.personal_icon {
margin: 5%;
}
<html>
<head>
<title>
Test
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: landscape) and (max-width: 640px)" href="landscape.css">
<link rel="stylesheet" href="grid.css">
</head>
<body>
<div class="top">
<div class="nav">
<nav>
<img src="http://img.informer.com/icons/png/32/1531/1531696.png" style="height:40px; float:left;">
About Me
My Projects
</nav>
</div>
</div>
<br>
<div class="header">
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
</body>
</html>
You want something like this. In your code you are fixing bg-image of header, therefore the body will scroll over that image, so need to fix the header instead of fixing bg-image
body {
margin: 0px;
padding: 0px;
font-family: Roboto;
background: #eeeeee;
padding-top:70vh;
}
html {
margin: 0px;
padding: 0px;
}
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
.top {
height: auto;
margin: auto;
font-family: Roboto Light;
}
.nav {
height: 40px;
width: 100%;
position: fixed;
background: #4caf50;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
top:0;
}
.nav a:link,
.nav a:visited {
font-size: 20px;
width: auto;
padding: 5px;
margin: 5px;
text-decoration: none;
color: white;
text-align: center;
}
.nav a:hover,
.nav a:active {
background-color: #388e38;
}
.header {background: url(https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg) center center fixed;
height: 70vh;
width: 100%;
position:fixed;
top:40px;
z-index:-1;
}
a {
text-decoration: none;
}
.container {
margin: 5%;
background: white;
}
.personal_icon {
margin: 5%;
}
<html>
<head>
<title>
Test
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: landscape) and (max-width: 640px)" href="landscape.css">
<link rel="stylesheet" href="grid.css">
</head>
<body>
<div class="top">
<div class="nav">
<nav>
<img src="http://img.informer.com/icons/png/32/1531/1531696.png" style="height:40px; float:left;">
About Me
My Projects
</nav>
</div>
</div>
<br>
<div class="header">
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
</body>
</html>
After playing with it a bit, I think there is a problem with the header. It works if you give it position: fixed and z-index: -1. The only remaining problem is that you have to make sure that the space remains. I recommend a <div style="height: 70%"></div>
Setting z-index to 1 for your nav should help.