How to set the site dimensions in CSS3 automatically while resizing the browser?

Question

A sophomore IT student here. As you can see, I made two gif images here so you can easily identify what really my problem is :) Anyway, the first gif image is an html site project made by me for our school, unfortunately when I open the project on the browser and resize it, all of the contents screws :( However, the positions are all fixed on CSS and I almost tried all kinds positions available there on CSS but it still won't work :( Comparing this to the second gif image which is an app-featured website, resizing it does not screw the contents within the site, all contents are constant on its own positions no matter how I resize the browser and I really coudn't determine if what's the code being added there on the site to maintain its contents positions when the browser resize or viewed on different monitor.

Project Site

Website Sorry for some bad grammar, thanks alot for understanding me! Btw, here's my CSS code:

@font-face{
font-family: 'robotocondensed-bold-webfont';
src: url('fonts/robotocondensed-bold-webfont.eot');
src: url('fonts/robotocondensed-bold-webfont.eot?#iefix') format('eot'),
url('fonts/robotocondensed-bold-webfont.woff') format('woff'),
url('fonts/robotocondensed-bold-webfont.ttf') format('truetype'),
url('fonts/robotocondensed-bold-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'robotocondensed-bold-webfont';
src: url('fonts/robotocondensed-bold-webfont.svg') format('svg');
}
}
@font-face{
font-family: 'roboto-regular-webfont';
src: url('fonts/roboto-regular-webfont.eot');
src: url('fonts/roboto-regular-webfont.eot?#iefix') format('eot'),
url('fonts/roboto-regular-webfont.woff') format('woff'),
url('fonts/roboto-regular-webfont.ttf') format('truetype'),
url('fonts/roboto-regular-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'roboto-regular-webfont';
src: url('fonts/roboto-regular-webfont.svg') format('svg');
}
}
@font-face{
font-family: 'roboto-bold-webfont';
src: url('fonts/roboto-bold-webfont.eot');
src: url('fonts/roboto-bold-webfont.eot?#iefix') format('eot'),
url('fonts/roboto-bold-webfont.woff') format('woff'),
url('fonts/roboto-bold-webfont.ttf') format('truetype'),
url('fonts/roboto-bold-webfont.svg') format('svg');
font-weight: bold;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'roboto-bold-webfont';
src: url('fonts/roboto-bold-webfont.svg') format('svg');
}
}
@font-face{
font-family: 'catull-webfont';
src: url('fonts/catull-webfont.eot');
src: url('fonts/catull-webfont.eot?#iefix') format('eot'),
url('fonts/catull-webfont.woff') format('woff'),
url('fonts/catull-webfont.ttf') format('truetype'),
url('fonts/catull-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'catull-webfont';
src: url('fonts/catull-webfont.svg') format('svg');
}
}
@font-face{
font-family: 'opensans-regular-webfont';
src: url('fonts/opensans-regular-webfont.eot');
src: url('fonts/opensans-regular-webfont.eot?#iefix') format('eot'),
url('fonts/opensans-regular-webfont.woff') format('woff'),
url('fonts/opensans-regular-webfont.ttf') format('truetype'),
url('fonts/opensans-regular-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'opensans-regular-webfont';
src: url('fonts/opensans-regular-webfont.svg') format('svg');
}
}
@font-face{
font-family: 'opensans-light-webfont';
src: url('fonts/opensans-light-webfont.eot');
src: url('fonts/opensans-light-webfont.eot?#iefix') format('eot'),
url('fonts/opensans-light-webfont.woff') format('woff'),
url('fonts/opensans-light-webfont.ttf') format('truetype'),
url('fonts/opensans-light-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'opensans-regular-webfont';
src: url('fonts/opensans-regular-webfont.svg') format('svg');
}
}
@font-face{
font-family: 'opensans-bold-webfont';
src: url('fonts/opensans-bold-webfont.eot');
src: url('fonts/opensans-bold-webfont.eot?#iefix') format('eot'),
url('fonts/opensans-bold-webfont.woff') format('woff'),
url('fonts/opensans-bold-webfont.ttf') format('truetype'),
url('fonts/opensans-bold-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'opensans-regular-webfont';
src: url('fonts/opensans-regular-webfont.svg') format('svg');
}
}
@font-face{
font-family: 'roboto-black-webfont';
src: url('fonts/roboto-black-webfont.eot');
src: url('fonts/roboto-black-webfont.eot?#iefix') format('eot'),
url('fonts/roboto-black-webfont.woff') format('woff'),
url('fonts/roboto-black-webfont.ttf') format('truetype'),
url('fonts/roboto-black-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'roboto-black-webfont';
src: url('fonts/roboto-black-webfont.svg') format('svg');
}
}
@font-face{
font-family: 'roboto-light-webfont';
src: url('fonts/roboto-light-webfont.eot');
src: url('fonts/roboto-light-webfont.eot?#iefix') format('eot'),
url('fonts/roboto-light-webfont.woff') format('woff'),
url('fonts/roboto-light-webfont.ttf') format('truetype'),
url('fonts/roboto-light-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'roboto-light-webfont';
src: url('fonts/roboto-light-webfont.svg') format('svg');
}
#bg-topbottom {
background-color: #0E7AE0;
height: 125%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#bg-bottom {
background-color: #FFDE85;
position: absolute;
height: 100%;
top: 125%;
bottom: 0;
left: 0;
right: 0;
}
#bg-bottom-first {
background-color: #00A76B;
position: absolute;
height: 130%;
top: 225%;
bottom: 0;
left: 0;
right: 0;
}
#bg-bottom-second {
background-color: #FFDE85;
position: absolute;
height: 50%;
top: 353.5%;
bottom: 0;
left: 0;
right: 0;
}
#bg-bottom-third {
background-color: #ffffff;
position: absolute;
height: 130%;
top: 403.5%;
bottom: 0;
left: 0;
right: 0;
}
#bg-bottom-fourth{
background-color: #0E7AE0;
position: absolute;
height: 105%;
top: 508.8%;
bottom: 0;
left: 0;
right: 0;
}
#bg-bottom-fifth{
background-color: #EBEAEB;
position: absolute;
height: 20%;
top: 613%;
left: 0;
right: 0;
bottom: 0;
}
.features a{
font-family: 'roboto-bold-webfont';
position: absolute;
font-size: 85%;
top: 5%;
left: 73%;
    color: #0A559C;
    text-decoration:none;
    text-shadow: 0 1px #0A559C;
    font-weight: bold;
}
.features a:before {
    color: #fff;
    content: attr(data-hover);
    position: absolute;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
}
.features a:hover:before,
.features a:focus:before {
    -webkit-transform: scale(0.9);
    opacity: 0;
}
.signup a{
font-family: 'roboto-bold-webfont';
font-size: 85%;
position: absolute;
top: 5%;
left: 79%;
right: 0;
    color: #0A559C;
    font-weight: 700;
    text-decoration:none;
    text-shadow: 0 1px #0A559C;
    font-weight: bold;
}
.signup a:before {
    color: #fff;
    content: attr(data-hover);
    position: absolute;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
}
.signup a:hover:before,
.signup a:focus:before {
    -webkit-transform: scale(0.9);
    opacity: 0;
}
.about a{
font-family: 'roboto-bold-webfont';
font-size: 85%;
position: absolute;
top: 5%;
left: 84.5%;
right: 0;
    color: #0A559C;
    font-weight: bold;
    text-shadow: 0 1px #0A559C;
    text-decoration:none;
}
.about a:before {
    color: #fff;
    content: attr(data-hover);
    position: absolute;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
}
.about a:hover:before,
.about a:focus:before {
    -webkit-transform: scale(0.9);
    opacity: 0;
}
.content-matters{
font-family: 'roboto-regular-webfont';
color: #ffffff;
font-size: 180%;
position: absolute;
top: 35%;
left: 38.5%;
}
.content-kitkat{
font-family: 'roboto-light-webfont';
color: #ffffff;
font-size: 130%;
position: absolute;
top: 42%;
left: 30%;
}
.Nexus5{
position: absolute;
top: 20%;
left: 23%;
}
#cursor-down.floating{
position: absolute;
top: 100%;
left: 46.4%;
    -webkit-animation-name: floating;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes floating {
    0% {
        -webkit-transform: translateY(0%);  
    }
    50% {
        -webkit-transform: translateY(15%); 
    }   
    100% {
        -webkit-transform: translateY(0%);
    }           
}
#logo {
position: absolute;
top: 4.5%;
left: 20%;
}
.cam-animation{
position: absolute;
top: 251.7%;
left: 21.7%;
}
.nexus-cam{
position: absolute;
top: 253%;
left: 81.6%;
}
.overlay-cam{
position: absolute;
top: 237.5%;
left: 11.3%;
}
.video-animation{
position: absolute;
top: 287%;
left: 60%;
}
.cam-animation-one{
position: absolute;
top: 292.3%;
left: 63.4%;
clip: rect(1px, 360px, 290px, 8px);
}
.cam-kit{
position: absolute;
top: 287%;
left: 60%;
}
#nexus-info {
position: absolute;
top: 139.5%;
left: 29.3%;
}
#ngif {
position: absolute;
top: 146.5%;
left: 31.1%;
}
#nexus-info:hover + #ngif {
    -webkit-animation: crt-on 0.3s 0s 1;
    -webkit-animation-timing-function: ease-out;
    -moz-animation: crt-on 0.3s 0s 1;
    -moz-animation-timing-function: ease-out;
    opacity: 1.0;
}
#ngif {
    -webkit-animation: crt-off 0.3s 0s 1;
    -webkit-animation-timing-function: ease-out;
    -moz-animation: crt-off 0.3s 0s 1;
    -moz-animation-timing-function: ease-out;

    opacity: 0.0;
}
@-webkit-keyframes crt-on {
    0% {
        opacity: 0.0;
        -webkit-transform: scale(0.5, 0.005);
        -webkit-box-shadow: inset 0 9999px 0 rgba(255,255,255,1.0);
    }
    40% {
        opacity: 1.0;
    }
    70% {
        -webkit-transform: scale(1.0, 0.005);
        -webkit-box-shadow: inset 0 9999px 0 rgba(255,255,255,1.0);
    }
    100% {
        -webkit-transform: scale(1.0, 1.0);
    }
}
@-webkit-keyframes crt-off {
    0% {
        -webkit-transform: scale(1.0, 1.0);
        opacity: 1.0;
    }
    40% {
        -webkit-transform: scale(1.0, 0.005);
        -webkit-box-shadow: inset 0 9999px 0 rgba(255,255,255,1.0);
    }
    70% {
        opacity: 1.0;
    }
    100% {
        opacity: 0.0;
        -webkit-transform: scale(0.5, 0.005);
        -webkit-box-shadow: inset 0 9999px 0 rgba(255,255,255,1.0);
    }
}
.first-content{
position: absolute;
top: 158%;
left: 52%;
}
.three-features{
position: absolute;
top: 360%;
left: 17%;
}
.button-pricetag {
position: absolute;
top: 185%;
left: 52.9%;
margin-top: 10px;
margin-right: 10px;
padding: 14px 26px;
font-size: 14px;
color: #ffffff;
vertical-align: middle;
text-align: center;
font-weight: bold;
-webkit-transition: background 0.2s ease-in-out;
text-shadow: 0 1px #0A559C;
color: #ffffff;
-webkit-border-radius: 3px;
font-family: Roboto-Condensed, sans-serif;
}
.button-pricetag:active {
    padding-top: 15px;
    margin-bottom: -1px;
}
.button-pricetag, .button-pricetag:hover .button-pricetag:active{
outline: 0 none;
    text-decoration: none;
    color: #ffffff;
}
.button {
    background-color: #0E7AE0;
    box-shadow: 0px 3px 0px 0px #0A559C;
}
.button:hover {
    background-color: #2570B7;
}
.button:active {
    box-shadow: 0px 1px 0px 0px #0E7AE0;
}
.popup-dialer{
position: absolute;
top: 369.3%;
bottom: 0;
left: 27.4%;
right: 0;
opacity: 0;
transition: all 0.3s ease;
}
.popup-dialer:hover{
opacity: 1;
}
.button-cam {
position: absolute;
top: 338%;
left: 18.5%;
margin-top: 10px;
margin-right: 10px;
padding: 14px 26px;
font-size: 14px;
color: #ffffff;
vertical-align: middle;
text-align: center;
font-weight: bold;
-webkit-transition: background 0.2s ease-in-out;
text-shadow: 0 1px #0A559C;
color: #ffffff;
-webkit-border-radius: 3px;
font-family: Roboto-Condensed, sans-serif;
}
.button-cam:active {
    padding-top: 15px;
    margin-bottom: -1px;
}
.button-cam, .button-cam:hover .button-cam:active{
outline: 0 none;
    text-decoration: none;
    color: #ffffff;
}
.button-second {
    background-color: #0E7AE0;
    box-shadow: 0px 3px 0px 0px #0A559C;
}
.button-second:hover {
    background-color: #2570B7;
}
.button-second:active {
    box-shadow: 0px 1px 0px 0px #0E7AE0;
}
}
.form-control:-moz-placeholder {
  color: #b2bcc5;
}
.form-control::-moz-placeholder {
  color: #b2bcc5;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #b2bcc5;
}
.form-control::-webkit-input-placeholder {
  color: #b2bcc5;
}
.form-control.placeholder {
  color: #b2bcc5;
}
.form-control {
position: absolute;
left: 43.5%;
top: 478%;
  border: 2px solid #bdc3c7;
  color: #34495e;
  font-family: 'roboto-bold-webfont';
  font-size: 15px;
  line-height: 1.467;
  padding: 8px 12px;
  height: 42px;
  -webkit-appearance: none;
  border-radius: 6px;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
  transition: border .25s linear, color .25s linear, background-color .25s linear;
}
.form-group.focus .form-control,
.form-control:focus {
  border-color: #1abc9c;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.form-control-one:-moz-placeholder {
  color: #b2bcc5;
}
.form-control-one::-moz-placeholder {
  color: #b2bcc5;
  opacity: 1;
}
.form-control-one:-ms-input-placeholder {
  color: #b2bcc5;
}
.form-control-one::-webkit-input-placeholder {
  color: #b2bcc5;
}
.form-control-one.placeholder {
  color: #b2bcc5;
}
.form-control-one {
position: absolute;
left: 43.5%;
top: 485%;
  border: 2px solid #bdc3c7;
  color: #34495e;
  font-family: 'roboto-bold-webfont';
  font-size: 15px;
  line-height: 1.467;
  padding: 8px 12px;
  height: 42px;
  -webkit-appearance: none;
  border-radius: 6px;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
  transition: border .25s linear, color .25s linear, background-color .25s linear;
}
.form-group.focus .form-control-one,
.form-control-one:focus {
  border-color: #1abc9c;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.n5-signup{
position: absolute;
left: 35%;
top: 420%;
}
input[type=checkbox] {display:none;}
.container {
position: absolute;
top: 492%;
left: 43.7%;
}
span {
background-color:#BBBBBB;
-webkit-border-radius:4px;
border-radius:4px;
color:#FFF;
font-size:100%;
text-decoration:none;
font-family:'roboto-bold-webfont';
text-align:center;
width:212px;
height:40px;
line-height:40px;
cursor:pointer;
display:block;
-webkit-transition:background-color 150ms ease-in;
-moz-transition:background-color 150ms ease-in;
-ms-transition:background-color 150ms ease-in;
-o-transition:background-color 150ms ease-in;
transition:background-color 150ms ease-in;
}
span:hover {
background-color:#E74C3C;
}
input[type=checkbox]:checked + span {
background-color:#E74C3C;
text-decoration:none;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
background:#E74C3C url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC) no-repeat 7% center;
background-size:15px 13px;
}
input[type=checkbox]:checked:hover + span {
background-color:#dd5244;
color:rgba(255,255,255,0.5);
text-decoration:none;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
background:#dd5244 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAS5JREFUeNq8110OgjAMAGBGvIY3VESjt9jPg95PT+LccBIZ7dYOWJPGB+g+Ymg3hLW2QeLkcu/y2pSFdvl0eQevehjI3uXbfkMh96TShFq/xhG6J4faAtxEtSBOQTm4QWpnOBWl4CZT69fuYpiCpnBDrB1xLhrjgoFO8F1oGcFslUv4bV32zFoxmOHJta0XMn65dC0UaiddA8UGiN4axeC1cUkdmWviEls/NwL1FqjPNtNvoimPdC3yRCUTiTXbt0R/oSnw2iiK10BBvBY6w2uiE3xJr8oFtcrvxy/fVcyeVdGx98yotcOxN/znHeMUIhdMOG8c4reagssF43VEoT5O4ZJwvNUUFJtcEE5BMXyGpnanf5yDxjiI+hSJj7YunEBvhbuTCh9tD+jiR4ABAJ0SrJgNr1UAAAAAAElFTkSuQmCC) no-repeat 7% center;
background-size:15px 15px;
}
.button-login {
position: absolute;
top: 497.2%;
left: 43.7%;
height: 15px;
width: 160px;
margin-top: 10px;
margin-right: 10px;
padding: 14px 26px;
font-size: 15px;
color: #ffffff;
text-align: center;
font-weight: bold;
-webkit-transition: background 0.2s ease-in-out;
color: #ffffff;
-webkit-border-radius: 3px;
font-family: Roboto-Condensed, sans-serif;
}
.button-login:active {
    padding-top: 15px;
    margin-bottom: -1px;
}
.button-login, .button-login:hover .button-login:active{
outline: 0 none;
    text-decoration: none;
    color: #ffffff;
}
.button-third {
    background-color: #0E7AE0;
    box-shadow: 0px 3px 0px 0px #0A559C;
}
.button-third:hover {
    background-color: #2570B7;
}
.button-third:active {
    box-shadow: 0px 1px 0px 0px #0E7AE0;
}
.about-nexus{
position: absolute;
top: 515%;
left: 10%;
}
#google-logo{
font-family: 'catull-webfont';
font-size: 200%;
color: #C5C4C3;
position: absolute;
text-decoration: none;
top: 621%;
left: 48.5%;
}

And here's my HTML code (Sorry for the unproper codings of my html)

<html>
<body>
<link rel="stylesheet" type="text/css" href="props.css">
<div id="bg-topbottom"></div>
<a name="features"><div id="bg-bottom"></div></a>
<div id="bg-bottom-first"></div>
<div id="bg-bottom-second"></div>
<a name="signup"><div id="bg-bottom-third"></div></a>
<a name="about"><div id="bg-bottom-fourth"></div></a>
<a name="fifth"><div id="bg-bottom-fifth"></div></a>
<div class="features"><a href="#features" data-hover="Features">Features</a></div>
<div class="signup"><a href="#signup" data-hover="Sign Up">Sign Up</a></div>
<div class="about"><a href="#about" data-hover="About">About</a></div>
<div class="Nexus5"><img src="N5-preview.png"></div>
<div id="logo"><img src="logo2.png"></div>
<div id="nexus-info"><img src="nexus5.png"></div>
<div id="ngif"><img src="GELANIM.gif" width="220" height="378"></div>
<div class="first-content"><img src="first-content.png"></div>
<a href="#fifth" div id="cursor-down" class="floating"><img src="player.png"></div></a href>
<a href="#" class="button-pricetag button">Buy Now</a href>
<div class="overlay-cam"><img src="overlay-cam.png"></div>
<div class="cam-animation"><img src="camera.gif"></div>
<div class="video-animation"><img src="n5-video.png"></div>
<div class="cam-animation-one"><img src="camera.gif" width="370"></div>
<div class="cam-kit"><img src="cam-kit.png"></div>
<a href="#" class="button-cam button-second">Explore</a href>
<div class="three-features"><img src="three-features.png"></div>
<div class="n5-signup"><img src="n5-signup.png"></div>
<input type="text" placeholder="Enter your Email" class="form-control" />
<input type="password" placeholder="Enter your Password" class="form-control-one" />
<div class="container">
<label><input type="checkbox" name="Remember me" class="protype1"/><span>Remember me</span></label>
</div>
<a href="http://plus.google.com" class="button-login button-third">Sign in</a href>
<div class="about-nexus"><img src="about-nexus.png"></div>
<div id="google-logo">Google</div>
</body>
</html>

EDITED Anyway here's my actual site project hosted via Google Drive

We would also need to see the HTML for this. Just CSS won't help. — disinfor, Apr 28 '14 at 18:55

score 1 · Answer 1 · answered Apr 28 '14 at 22:22

1

It appears that you are using % for all your sizing, which can be rather tricky. Instead you can insert breakpoints in your style (similar to how you already have @media) and define exactly how you want your site to look at the various widths. It looks like this:

@media (min-width: 400px) {
    body {background-color: blue;}
}

@media (max-width: 1200px) {
    body {background-color: pink;}
}

@media (min-width: 480px) and (max-width: 1200px) {
    body {background-color: yellow;}
}

The above are just examples and they don't really work together. It's just to show you the syntax for styling your website based on the changing screen widths. Here's a great list of ways you can do this. Also consider bootstrap which enables you to markup your page with classes that takes mobile into consideration. (they use @media to accomplish this).

answered Apr 28 '14 at 22:22

miriye

143
5

Does it mean that I will need to insert '@media (max-width: x-x-x-px)' on every div ids/classes? – brettbrdls Apr 29 '14 at 15:24
Btw, my preferred dimensions of my site is 1298x824 (This is where all of my contents are matching together's positions) – brettbrdls Apr 29 '14 at 15:29
1

In response to your question: no. Think of the @media tags almost as a separate stylesheet that will only execute when those defined rules are satisfied. Another thing to remember is that the "C" stands for cascading (see [here](http://stackoverflow.com/questions/1043001/what-is-the-meaning-of-cascading-in-css)) so the more specific rule wins. On top of that, if you're rules are equally specific, e.g. you had one style `h1 {color: blue}` on line 1 of your stylesheet and `h1 {color: red}` on line 2, the one that was loaded last would be respected (in this case red wins). – miriye Apr 29 '14 at 17:51

How to set the site dimensions in CSS3 automatically while resizing the browser?

1 Answers1