CSS viewport width - css

Question

Okay, so at this moment I am busy learning responsive CSS. It might be simple for you, but I don't understand how to archieve this:
I am playing with making a 'grid'. I have set all the classes to percentages in width and height, so that should not be the problem. However, when I resize the viewport (window), it's not dynamically growing or shrinking.
See: here
Currently using the following html:
<meta name="viewport" content="width=device-width" />
<div id="wrapper">
<div id="header">
</div>
<div id="presenter">
</div>
<div id="main">
</div>
Using the following CSS:
<style>
/* Theme */
html {
margin-top: 0px !important;
}
/* DO NOT EDIT OR MONKEYS WILL BITE YOU */
.frame_holder {
position: absolute;
top: 8px;
bottom: 50px;
/* left: 50px; */
right: 150px;
background: #ffffff;
}
.my_frame {
width: 149%;
height: 108%;
/* border: 1px solid #e0e0e0; */
}
body {
background-color: #f0ede9;
margin-top: 0px;
position: relative;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.clearfix {
clear: both;
}
p {
font-family: Roboto;
padding: 1px;
}
#body.layout-1 {
background: #f0ede9 url(../images/border.gif) 640px top repeat-y scroll;
background-color: #f0ede9;
background-image: url(../images/border.gif), url(../images/border-2.gif);
background-repeat: repeat-y, repeat-y;
background-position: 640px top, 0px top;
}
a:hover, a:visited, a:link, a:active {
text-decoration: none;
color: #bababa;
font-family: Roboto;
}
#wrapper {
width: 965px;
margin: 0 auto;
overflow: hidden;
}
#header {
width: 100%;
height: 80px;
background: #2a2727;
margin-top: 20px;
color: #fff;
}
.top-logo-container {
display: block;
height: 100px;
width: 100px;
text-indent: -9999px;
background: url(http://favoritefm.com/wp-content/themes/FavClear/img/logo.png) 5% 50% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100px;
}
#main {
margin-left: 2px;
overflow: hidden;
}
#presenter {
margin-top: 40px;
width: 100%;
height: 40%;
overflow: hidden;
}
.presenter-one {
display: block;
height: 100%;
width: 50%;
text-indent: -9999px;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-two {
float: left;
position: relative;
display: block;
height: 50%;
width: 25%;
text-indent: -9999px;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 266px 300px;
}
.presenter-three {
position: relative;
display: block;
height: 50%;
width: 25%;
text-indent: -9999px;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 266px 310px;
}
.presenter-four {
position: relative;
display: block;
height: 52%;
width: 25%;
text-indent: -9999px;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 266px 300px;
}
.presenter-five {
position: relative;
display: block;
height: 52%;
width: 25%;
text-indent: -9999px;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 266px 300px;
}
#media screen and (max-width: 965px) {
body {
width: 50%;
}
#main {
width: 50%
}
#media screen and (max-width: 365px) {
body {
width: 100%;
}
#wrapper {
width: 100%
margin: 0 auto;
}
#header {
width: 100%;
background: #2a2727;
color: #fff;
margin-top: 0px;
height: 100px;
}
.top-logo-container {
display: block;
height: 120px;
width: 120px;
text-indent: -9999px;
background: url(http://favoritefm.com/wp-content/themes/FavClear/img/logo.png) 5% 50% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 120px;
}
#main {
margin-left: 2px;
}
#presenter {
margin-top: 40px;
width: 100%;
height: 100%;
}
.presenter-one {
display: block;
height: 100%;
width: 100%;
text-indent: -9999px;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-two {
display: block;
height: 50%;
width: 50%;
text-indent: -9999px;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-three {
position: relative;
display: block;
height: 50%;
width: 50%;
text-indent: -9999px;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-four {
position: relative;
display: block;
height: 50%;
width: 50%;
text-indent: -9999px;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-five {
position: relative;
display: block;
height: 50%!important;
width: 50%;
text-indent: -9999px;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%
}
}

Answer 1

You’ve missed closing your #media screen and (max-width: 965px) and setting your #wrapper to width: 100%; in this breakpoint. Then it will be responsive.
#media screen and (max-width: 965px) {
body {
width: 50%;
}
#wrapper {
width: 100%;
}
#main {
width: 50%
}
}
Additionally:
I don’t think it makes any sense to set the width of body and #main to 50 % here.
See JSFiddle