When I shrink my viewport, my divs (labeled "Top", "Left", and "Right") stack on top of each other like I want them, but don't show their full widths. The widths of each div becomes cut, so you can't see their full width on a mobile device. How should I change my code to show the full width of each div on a mobile device?
body
{
margin: 0;
padding: 0;
}
#wrapper
{
position: relative;
width: 900px;
height: 600px;
background-color: yellow;
left: 50%;
margin-left: -450px;
top: 0;
}
#main
{
position: absolute;
width: 900px;
height: 100px;
background-color: #99CCCC;
left: 50%;
margin-left: -450px;
}
#main p
{
font-family: sans-serif;
color: #333;
font-weight: bold;
text-align: center;
font-size: 40px;
margin-top: 0;
padding-top: 25px;
}
#left
{
position: absolute;
width: 200px;
height: 500px;
background-color: green;
top: 100px;
}
#left p
{
font-family: sans-serif;
font-weight: bold;
color: #333;
font-size: 45px;
text-align: center;
}
#right
{
position: absolute;
width: 200px;
height: 500px;
top: 100px;
right: 0;
background-color: dodgerblue;
}
#right p
{
font-family: sans-serif;
font-weight: bold;
color: #333;
font-size: 45px;
text-align: center;
}
/* START OF MEDIA QUERIES */
#media all and (max-width: 961px) {
#wrapper {
position: relative
width: 100%;
height: 400px;
background-color: yellow;
left: 0;
margin-left: 0;
top: 0;
}
#main {
position: absolute;
width: 100%;
height: 100px;
background-color: #99CCCC;
left: 0;
margin-left: 0;
}
#left {
position: absolute;
width: 100%;
height: 100px;
background-color: green;
top: 150px;
display: block;
}
#left p {
font-family: sans-serif;
font-weight: bold;
color: #333;
font-size: 45px;
text-align: center;
margin-top: 25px;
}
#right {
position: absolute;
width: 100%;
height: 100px;
background-color: dodgerblue;
top: 300px;
right: 0;
}
#right p {
font-family: sans-serif;
font-weight: bold;
color: #333;
font-size: 45px;
text-align: center;
margin-top: 25px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Responsive website</title>
<link rel="stylesheet" href="test.css">
<meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"/>
</head>
<body>
<div id="wrapper">
<div id="main">
<p>Top</p>
</div>
<div id="left">
<p>Left</p>
</div>
<div id="right">
<p>Right</p>
</div>
</div>
</body>
</html>
Please check updeted answer:
You have small mistake in your code, add the " ; " after you can give
"position:relative;" in id "#wrapper" for responsive.
Related
How do I keep those images I made in the same place when I expand or shrink the window? I understand that there are similar functions, namely max-height and min-height that prevent the elements from shrinking or expanding below or above a certain height or width when the window is likewise expanded or shrunk, but I do not exactly understand how the above can be achieved
I plan to use the max-height and min-height contents for the elements but I would figure the "top:" element would be involved.
Below is the code as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title> characters</title>
<meta charset="utf-8">
</head>
<body class="parallax">
<link href="cssname.css" rel="stylesheet" type="text/css">
<div>
<h1>←Go Backtitle1</h1>
<h2 class="header1">header1</h2>
<img src="image1.png" alt="image1" class="image1">
<p class="text1">text</p>
<h2 class="header2">header2</h2>
<img src="image2.png" alt="image2" class="image2">
<p class="text2">text</p>
<h2 class="header3">header3</h2>
<img src="image3.png" alt="image3" class="image3">
<p class="text3">text</p>
<h2 class="header4">header4</h2>
<img src="image4.png" alt="image4" class="image4">
<p class="text4">text</p>
</div>
</body>
</html>
h1{
font-family: 'Quicksand';
text-align: center;
position: relative;
background: antiquewhite;
border: 5px solid bisque;
}
.image1 {
left: 400;
position: absolute;
right: 60%;
height: 250px;
}
.image2 {
position: absolute;
right: 20%;
top: 59%;
padding: 0px;
margin: 0px;
height: 250px;
}
.image3 {
position: absolute;
right: 60%;
top: 92%;
padding: 0px;
margin: 0px;
height: 250px;
}
.image4 {
position: absolute;
right: 20%;
top: 130%;
padding: 0px;
margin: 0px;
height: 250px;
}
.goback{
float: left;
display: indent-block;
position: relative;
margin-top: 25px;
font-size: 20px;
}
.text1 {
color: darkgoldenrod;
font-family: 'Quicksand';
font-size: 18px;
top: -100;
float: right;
left: 100;
position: relative;
background: antiquewhite;
width: 60%;
border: 5px solid bisque;
padding: 0px;
margin: 0px;
line-height: 1.5;
}
.header1 {
color: darkgoldenrod;
font-family: 'Quicksand';
font-size: 30px;
top: 800;
float: right;
left: 100;
padding: 0px;
margin: 0px;
position: relative;
background: antiquewhite;
width: 60%;
border: 5px solid bisque;
line-height: 1.5;
}
.text2 {
color: darkgoldenrod;
font-family: 'Quicksand';
font-size: 18px;
top: -100;
float: left;
left: 100;
position: relative;
background: antiquewhite;
width: 60%;
border: 5px solid bisque;
padding: 0px;
margin: 0px;
line-height: 1.5;
}
.header2 {
color: darkgoldenrod;
font-family: 'Quicksand';
font-size: 30px;
top: 800;
float: left;
left: 100;
padding: 0px;
margin: 0px;
position: relative;
background: antiquewhite;
width: 60%;
border: 5px solid bisque;
line-height: 1.5;
}
.header4 {
color: darkgoldenrod;
font-family: 'Quicksand';
font-size: 30px;
top: 800;
float: left;
left: 100;
padding: 0px;
margin: 0px;
position: relative;
background: antiquewhite;
width: 60%;
border: 5px solid bisque;
line-height: 1.5;
}
.text4 {
color: darkgoldenrod;
font-family: 'Quicksand';
font-size: 18px;
top: -100;
float: left;
left: 100;
position: relative;
background: antiquewhite;
width: 60%;
border: 5px solid bisque;
padding: 0px;
margin: 0px;
line-height: 1.5;
}
.header3 {
color: darkgoldenrod;
font-family: 'Quicksand';
font-size: 30px;
top: 800;
float: right;
left: 100;
padding: 0px;
margin: 0px;
position: relative;
background: antiquewhite;
width: 60%;
border: 5px solid bisque;
line-height: 1.5;
}
.text3 {
color: darkgoldenrod;
font-family: 'Quicksand';
font-size: 18px;
top: -100;
float: right;
left: 100;
position: relative;
background: antiquewhite;
width: 60%;
border: 5px solid bisque;
padding: 0px;
margin: 0px;
line-height: 1.5;
}
.parallax{
background-image: url("bg.png");
min-height: 300px;
height: 200px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
and here is a crude representation of the issue, where t = textbox, i = image, yellowcircle = windowmode and greencircle = fullscreen: https://imgur.com/a/lkOMS1G
Any help would be graciously appreciated
see the post above for tried and expected
The reason is probably because you are using position: absolute for all your images.
absolute is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
By the structure of your HTML, your image will position them relative to document.body.
You could try to change absolute to relative and place all your images to desired position, also meaning you have to remove top and right property.
I've changed the color of my header, which includes a logo and a title.
In the title, the text box where the words appear are taking the background-color of the background of the body of the website, and not taking the background color of the header.
* {
margin: 0px;
padding: 0px;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
background-color: #C0C0C0;
}
.headerMenu {
background-color: #00b9ED;
height: 40px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
padding-bottom: 10px;
width: 100%;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
padding-top: 0px;
padding-bottom: 0px;
}
.logo {
width: 125px;
}
.logo img {
background-color: #00b9ED;
position: absolute;
width: 50px;
height: 38px;
top: 0;
left: 10px;
}
.headerTitle {
background-color: #00b9ED;
position: absolute;
top: 15px;
left: 80PX;
font-family: 'oswald', arial, sans-serif;
}
<!DOCTYPE HTML>
<HTML>
<HEAD>
<title>FINDPETS</title>
<link href="./css/style.css" rel="stylesheet" type="text/css" />
</HEAD>
<body>
<div class="headerMenu">
<div id="wrapper">
<div class="headerTitle">
<h2>PET FRIENDS</h2>
</div>
<div class="logo">
<img src="./IMG/dog_bone_logo.png" />
</div>
</div>
</div>
</body>
</HTML>
Photo of the resulting error:
the asterisk selector * is called the universal selector . Which means it selects all elements so it will add all those properties ( including background-color ) to the title as well.
You can just remove the background-color property rule from * {} and add it to a new body {} selector. That way the background-color property won't be applied to all your elements but only to body
body {
background-color: #C0C0C0;
}
* {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
padding: 0px;
margin: 0px;
}
.headerMenu {
background-color: #00b9ED;
height: 40px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
padding-bottom: 10px;
width: 100%;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
padding-top: 0px;
padding-bottom: 0px;
}
.logo {
width: 125px;
}
.logo img {
background-color: #00b9ED;
position: absolute;
width: 50px;
height: 38px;
top: 0;
left: 10px;
}
.headerTitle {
background-color: #00b9ED;
position: absolute;
top: 15px;
left: 80PX;
font-family: 'oswald', arial, sans-serif;
}
<div class="headerMenu">
<div id="wrapper">
<div class="headerTitle">
<h2>PET FRIENDS</h2>
</div>
<div class="logo">
<img src="./IMG/dog_bone_logo.png" />
</div>
</div>
</div>
I'm trying to make it so that when I user resizes there window it wont move anything on the page, and it wont resize anything. But I still wont the site to look the same on different screen sizes. Because right now the website moves my image and my buttons. The buttons also change size.
* {
box-sizing: border-box; }
#wrapper {
margin-left:auto;
margin-right:auto;
width:100%;
height: 100%;
}
body {
background-color: black;
font-family: "Source Sans Pro", sans-serif;
text-align: center;
color: #ccc;
}
div {
height: 100%;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
h3 {
position: absolute;
font-size: 100px;
font-weight: 100;
color: white;
margin-top: 70px;
margin-left: 80px;
}
img {
margin-top: 230px;
margin-right: 0px;
}
.home {
position: absolute;
border: 2px solid #CCCCCC;
text-align: center;
color: #ccc;
font-size: 26px;
line-height: 60px;
width: 10%;
height: 60px;
margin-top: 180px;
margin-left: 500px;
}
.about {
position: absolute;
border: 2px solid #CCCCCC;
text-align: center;
color: #ccc;
font-size: 26px;
line-height: 60px;
width: 10%;
height: 60px;
margin-top: 180px;
margin-left: 750px;
}
.projects {
position: absolute;
border: 2px solid #CCCCCC;
text-align: center;
color: #ccc;
line-height: 60px;
width: 10%;
height: 60px;
font-size: 26px;
margin-top: 180px;
margin-left: 1000px;
}
.contact {
position: absolute;
border: 2px solid #CCCCCC;
text-align: center;
color: #ccc;
line-height: 60px;
font-size: 26px;
width: 10%;
height: 60px;
margin-top: 180px;
margin-left: 1250px;
}
.home:hover{
border-color: #0091FF;
color: #0091FF;
}
.about:hover{
border-color: #0091FF;
color: #0091FF;
}
.projects:hover{
border-color: #0091FF;
color: #0091FF;
}
.contact:hover{
border-color: #0091FF;
color: #0091FF;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="background.js"></script>
<title>Home</title>
</head>
<body>
<div id="wrapper">
<canvas class='connecting-dots'></canvas>
<h3>Title</h3>
<div class = "home">Home</div>
<div class = "about">About</div>
<div class = "projects">Projects</div>
<div class = "contact">Contact</div>
<img src="astronaut.png">
</div>
</body>
</html>
Set min-width: and min-height: on your elements. That will prevent them from getting any smaller and then you can do max-width and max-height to prevent them from growing. Also, change it from width:10%; to a solid/absolute number. This is saying 10% of whatever screen it is displayed on.
http://codepen.io/Squeakasaur/pen/OpwWqG
* {
box-sizing: border-box; }
#wrapper {
margin-left:auto;
margin-right:auto;
width:100%;
height: 100%;
}
body {
background-color: black;
font-family: "Source Sans Pro", sans-serif;
text-align: center;
color: #ccc;
}
div {
height: 100%;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
h3 {
position: absolute;
font-size: 100px;
font-weight: 100;
color: white;
margin-top: 70px;
margin-left: 80px;
}
img {
margin-top: 230px;
margin-right: 0px;
}
.home {
position: absolute;
border: 2px solid #CCCCCC;
text-align: center;
color: #ccc;
font-size: 26px;
line-height: 60px;
width: 150px;
height: 60px;
margin-top: 180px;
margin-left: 500px;
}
.about {
position: absolute;
border: 2px solid #CCCCCC;
text-align: center;
color: #ccc;
font-size: 26px;
line-height: 60px;
width: 150px;
height: 60px;
margin-top: 180px;
margin-left: 750px;
}
.projects {
position: absolute;
border: 2px solid #CCCCCC;
min-width: ;
text-align: center;
color: #ccc;
line-height: 60px;
width: 150px;
height: 60px;
font-size: 26px;
margin-top: 180px;
margin-left: 1000px;
}
.contact {
position: absolute;
border: 2px solid #CCCCCC;
text-align: center;
color: #ccc;
line-height: 60px;
font-size: 26px;
width: 150px;
height: 60px;
margin-top: 180px;
margin-left: 1250px;
}
.home:hover{
border-color: #0091FF;
color: #0091FF;
}
.about:hover{
border-color: #0091FF;
color: #0091FF;
}
.projects:hover{
border-color: #0091FF;
color: #0091FF;
}
.contact:hover{
border-color: #0091FF;
color: #0091FF;
}
My questions:
1.Logo: I'm trying to put my logo in top left side of my navigation but I can't. Any ideas (NOT UP TO CHANGE CODE A LOT)?
2.Screen resolution: Well I've noticed that my website isn't same on my PC and Laptop (ofc...). Is it possible to some how fix that. On this pictures you can also see how my website looks with my fonts. So you can see better that problem with Logo.
body {
background-color: white;
margin: 0;
padding: 0;
width: 100%;
height: auto;
min-width: 1000px;
}
#font-face {
font-family: "Jocker";
src: url("JockeyOne-Regular.ttf") format("truetype");
}
#font-face {
font-family: "Pacifica";
src: url("PacificaCondensed-Regular.ttf") format
("truetype");
}
#font-face {
font-family: "ReklameScript";
src:url("ReklameScript.ttf") format("truetype");
}
h1 {
font-size: 120px;
text-align: left;
font-family: "Jocker";
margin-left: 45;
color: rgb(200,101, 103);
}
h2 {
font-size: 70;
margin-left: 224;
font-family: "Jocker";
color: rgb(200,101, 103);
}
#header {
width: 100%;
height: 50px;
margin: auto;
}
#navigacija {
width: 100%;
margin-left: 0px;
padding: 0px;
height: 50px;
overflow: hidden;
text-align: right;
position: fixed;
background-color: #089DE3;
z-index: 9999;
}
#navigacija a {
color: white;
text-decoration: none;
line-height: 50px;
font-size: 30px;
font-family: "Pacifica";
display: inline-block;
padding-left: 50px;
padding-right: 50px;
padding-top: 0px;
padding-bottom: 0px;
}
#navigacija a:hover {
background: #00C5CD;
}
.main1 {
margin-top: 50px;
font-family: "ReklameScript";
font-size: 50;
background: #089DE3;
text-align: left;
margin-left: 194;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
bottom: 930;
right: 0px;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-wrapper {
width: 640px;
float: right;
margin-left:auto;
margin-right:auto;
max-width: 100%;
}
<!DOCYPE html>
<html>
<head>
<title>MaxSkins-Home</title>
<link rel="stylesheet" href="Home.css" type="text/css" />
</head>
<body>
<div id="header">
<div id="navigacija">
<div class="Home"><b>HOME</b></div>
<b>SHOP</b>
<b>GET POINTS</b>
<b>INFO</b>
</div>
</div>
<h1><b>EARN POINTS,<br> GET SKINS!</b></h1>
<h2><b>How does it work?</b></h2>
<div class="main1">
<p><b>It's simple!<br> Watch videos, do tasks and have fun!
<br>After earning large amount of coins,<br> contact us to get your skins!
<b></p>
</div>
<div class="video-wrapper">
<div class="video-container">
<iframe width="640" height="360"
src="https://www.youtube.com/embed/lwItL2NXwDw" frameborder="5"
allowfullscreen></iframe>
</div>
<!-- /video -->
</div>
<!-- /video-wrapper -->
</body>
</html>
1680x1050 1366x768
You may try something like this. As I've seen in the site you linked, the logo is formatted text. I inserted text with left float. See if that works for you.
body {
background-color: white;
margin: 0;
padding: 0;
width: 100%;
height: auto;
min-width: 1000px;
}
#font-face {
font-family: "Jocker";
src: url("JockeyOne-Regular.ttf") format("truetype");
}
#font-face {
font-family: "Pacifica";
src: url("PacificaCondensed-Regular.ttf") format
("truetype");
}
#font-face {
font-family: "ReklameScript";
src:url("ReklameScript.ttf") format("truetype");
}
h1 {
font-size: 120px;
text-align: left;
font-family: "Jocker";
margin-left: 45;
color: rgb(200,101, 103);
}
h2 {
font-size: 70;
margin-left: 224;
font-family: "Jocker";
color: rgb(200,101, 103);
}
#header {
width: 100%;
height: 50px;
margin: auto;
}
#navigacija {
width: 100%;
margin-left: 0px;
padding: 0px;
height: 50px;
overflow: hidden;
text-align: right;
position: fixed;
background-color: #089DE3;
z-index: 9999;
}
#navigacija a {
color: white;
text-decoration: none;
line-height: 50px;
font-size: 30px;
font-family: "Pacifica";
display: inline-block;
padding-left: 50px;
padding-right: 50px;
padding-top: 0px;
padding-bottom: 0px;
}
a#logo {
float: left;
}
#navigacija a:hover {
background: #00C5CD;
}
.main1 {
margin-top: 50px;
font-family: "ReklameScript";
font-size: 50;
background: #089DE3;
text-align: left;
margin-left: 194;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
bottom: 930;
right: 0px;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-wrapper {
width: 640px;
float: right;
margin-left:auto;
margin-right:auto;
max-width: 100%;
}
<!DOCYPE html>
<html>
<head>
<title>MaxSkins-Home</title>
<link rel="stylesheet" href="Home.css" type="text/css" />
</head>
<body>
<div id="header">
<div id="navigacija">
LOGO
<div class="Home"><b>HOME</b></div>
<b>SHOP</b>
<b>GET POINTS</b>
<b>INFO</b>
</div>
</div>
<h1><b>EARN POINTS,<br> GET SKINS!</b></h1>
<h2><b>How does it work?</b></h2>
<div class="main1">
<p><b>It's simple!<br> Watch videos, do tasks and have fun!
<br>After earning large amount of coins,<br> contact us to get your skins!
<b></p>
</div>
<div class="video-wrapper">
<div class="video-container">
<iframe width="640" height="360"
src="https://www.youtube.com/embed/lwItL2NXwDw" frameborder="5"
allowfullscreen></iframe>
</div>
<!-- /video -->
</div>
<!-- /video-wrapper -->
</body>
</html>
I've tried everything and can't seem to get the footer to stick to the bottom.
I've been moving things around, might have messed up the codes a bit.
I'm fine with how it is on longer (more content) pages. But it's giving me to much white space on pages with less content.
Help would be appreciated!
#charset "UTF-8";
* {
margin: 0;
}
/* Body */
html, body {
font-family: 'Questrial', sans-serif;
background-image: url('mila_background_btm.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
margin: 0;
padding: 0;
min-height: 100%;
}
/* Text */
h1 {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
color: #3A3366
}
h2 {
text-align: center;
margin-top: 20px;
color: #2D4B5B;
margin-bottom: 20px;
}
p {
margin-top: 1;
text-align: center;
line-height: 150%;
}
/* Container */
.container {
width: 90%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
text-decoration: none;
height: 100%;
padding-bottom: 50px;
}
/* Navigation */
header {
font-family: 'Questrial', sans-serif;
width: 90%;
height: 9%;
background-color: #fff;
border-bottom: 2px solid #312f47;
text-decoration: none;
margin-left: auto;
margin-right: auto;
}
nav {
float: right;
width: 70%;
text-align: right;
margin-right: 0px;
margin-top: 35px;
}
nav a {
font-size: 1rem;
padding: .5rem;
text-decoration: none;
color: #312f47;
}
a:hover {
background: #312f47;
color: white;
}
nav a:first-child {
display: none;
}
.current {
color: #9390A6;
}
/* Images */
.gallery {
margin-bottom: 100px;
height: 100%;
}
.photos {
max-width: 50%;
}
.contact {
display: block;
margin: auto;
margin-top: 50px;
}
/* Google Maps */
.google-maps {
position: relative;
padding-bottom: 16.6%;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video
{
position: relative;
padding-bottom: 56.25%;
padding-top: 80px;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.video iframe
{
position: absolute;
top: 0;
left: 15%;
width: 70%;
height: 70%;
}
/* Footer */
footer {
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
margin-top: 50px;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<header>
<nav>
</nav>
</header>
</div>
<footer>
</footer>
</body>
</html>
You have no text between the footer tags that is why you do not see the footer and if you add background color it will be much more clear.
For example you should add class="site-footer" to the html footer tag.
<footer class="site-footer">
The Footer.
</footer>
And the class definitions in the CSS file:
.site-footer{
height: 120px;
background: red;
}
You can also use the link for reference.
I'm using this for footer and its working perfect with me :
html,body,ul,a,li{
margin:0;
padding:0;
border:0;
outline:none;
vertical-align:top;
height:100%;
text-decoration:none;
}
.wrap{width:100%;
min-height:100%;
height: auto !important;
height:100%;margin:0 auto;
display:block;
background:lightblue;}
footer{
bottom:0px;
display:block;
width:100%;
height:auto;}
#fo-wrap{width:100%;
height:100px;
background-color:#FF2E99;}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class='wrap'>
here every thing in page
</div>
<footer>
<div id='fo-wrap'>
here footer content
</div>
</footer>
</body>
</html>
Add a min-height for .content relative to the viewport.
Decremented 110px from it (padding-bottom: 50px; margin-top: 10px; footer height: 50px)
footer {
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
margin-top: 50px;
position: fixed;
bottom: 0;
width: 100%;
background-color: #ccc;
}
#charset "UTF-8";
* {
margin: 0;
}
/* Body */
html, body {
font-family: 'Questrial', sans-serif;
background-image: url('mila_background_btm.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
margin: 0;
padding: 0;
min-height: 100%;
}
/* Text */
h1 {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
color: #3A3366
}
h2 {
text-align: center;
margin-top: 20px;
color: #2D4B5B;
margin-bottom: 20px;
}
p {
margin-top: 1;
text-align: center;
line-height: 150%;
}
/* Container */
.container {
width: 90%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
text-decoration: none;
height: 100%;
padding-bottom: 50px;
}
/* Navigation */
header {
font-family: 'Questrial', sans-serif;
width: 90%;
height: 9%;
background-color: #fff;
border-bottom: 2px solid #312f47;
text-decoration: none;
margin-left: auto;
margin-right: auto;
}
nav {
float: right;
width: 70%;
text-align: right;
margin-right: 0px;
margin-top: 35px;
}
nav a {
font-size: 1rem;
padding: .5rem;
text-decoration: none;
color: #312f47;
}
a:hover {
background: #312f47;
color: white;
}
nav a:first-child {
display: none;
}
.current {
color: #9390A6;
}
/* Images */
.gallery {
margin-bottom: 100px;
height: 100%;
}
.photos {
max-width: 50%;
}
.contact {
display: block;
margin: auto;
margin-top: 50px;
}
/* Google Maps */
.google-maps {
position: relative;
padding-bottom: 16.6%;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video
{
position: relative;
padding-bottom: 56.25%;
padding-top: 80px;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.video iframe
{
position: absolute;
top: 0;
left: 15%;
width: 70%;
height: 70%;
}
.container {
min-height: calc(100vh - 110px)
}
/* Footer */
footer {
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
width: 100%;
background-color: #ccc;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<header>
<nav>
</nav>
</header>
</div>
<footer>
My footer
</footer>
</body>
</html>