Responsive css is not responding - html

Question

The Responsive.css is not completed yet but it is responding according to the device size. The issues that are arising are that when I resize the the screen, the right section with header Memorial, an image below, and some text are not stacking correctly when the screen shrinks in size. Instead, it will be pushed down but remain on the right handside of the screen. Also have in issue with resizing the images I have displayed on my sites. I would like to resize accordingly with the size of the device. I have a logo image and a banner image and on top of these two images is the navigation bar which I am also having issue with resizing and making it transparent due to having the navigation bar on top of a grey background. How can I make it transparent on top of the banner and logo.
<img id="banner" src="img/banner.jpg"/>
<!--The main content of the website will go inside of the #wrapper id. It is divided into two sections: #primary & #secondary.-->
<div id="wrapper">
<!-- Two sections have been created for desktop view to have two columns. Mobile website will just be stacked-->
<div id="content">
<section id="primary"><!--Left column content goes here-->
<h2>Who We Are</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in elementum velit, venenatis rhoncus lacus. Ut consequat luctus enim, in auctor libero posuere ut. Curabitur vitae aliquet nisi. Etiam condimentum tincidunt venenatis. Fusce vel congue purus. Pellentesque ut eleifend ex. Nunc purus neque, aliquam vitae aliquam quis, accumsan id lacus. Nunc ac scelerisque magna. Etiam purus lorem, rutrum et ornare a, tincidunt non ipsum. Nullam blandit dui venenatis, malesuada felis a, porttitor purus.</p>
<p>This is how a link looks.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in elementum velit, venenatis rhoncus lacus. Ut consequat luctus enim, in auctor libero posuere ut. Curabitur vitae aliquet nisi. Etiam condimentum tincidunt venenatis. Fusce vel congue purus. Pellentesque ut eleifend ex. Nunc purus neque, aliquam vitae aliquam quis, accumsan id lacus. Nunc ac scelerisque magna. Etiam purus lorem, rutrum et ornare a, tincidunt non ipsum. Nullam blandit dui venenatis, malesuada felis a, porttitor purus.</p>
</section>
<section id="secondary"><!--Right column content goes here-->
<h2>Memorial</h2>
<img src="img/memorial_list.jpg"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in elementum velit, venenatis rhoncus lacus. Ut consequat luctus enim, in auctor libero posuere ut.</p>
</section>
</div>
</div>
<!--Footer still needs to be completed-->
<footer>
<div id="footer-right">
<ul><h3>ABOUT</h3>
<li>Contact Us</li>
<li>FAQ's</li>
<li>Site Map</li>
</ul>
<ul><h3>SUPPORT OUR CAUSE</h3>
<li>Donate</li>
<li>Volunteer</li>
<li>Fundraising Events</li>
</ul>
<ul><h3>FOLLOW US</h3>
<li>
<img src="img/facebook-icon.png" alt="Facebook Logo" class="social-icon">
<img src="img/instagram-icon.png" alt="Instagram Logo" class="social-icon">
<img src="img/twitter-icon.png" alt="Twitter Logo" class="social-icon"/>
<img src="img/pinterest-icon.png" alt="Pinterest Logo" class="social-icon"/>
</li>
</ul>
</div>
<div id="footer-left">
<p id="footer-slogan">BREAK THE <strong>SILENCE</strong> <br>AND <strong>CYCLE</strong> OF ABUSE</p>
<p id="copyright">Copyright© 2014 International Child Advocacy Network</p>
</div>
</footer>
Responsive CSS:
/*This is the placeholder for responsive CSS that we will implement for mobile design*/
/* Smartphones (portrait and landscape) ----------- */
#media screen and (min-device-width : 240px) and (max-device-width: 660px){
/* Styles */
#content{
float:left;
padding:0;
}
#body{
float:left;
font-family: 'Fabrica';
}
#logo {
margin-right:auto;
width: auto;
height: auto;
padding: 0;
}
#wrapper{
margin: 0 auto;
}
#wrapper p{
text-indent: 0;
}
#nav ul, nav a:visited{
position:relative;
display:none;
}
#nav a:hover {
display:block;
}
#nav li{
text-align:center;
width:100%;
}
#banner{
position:relative;
}
#footer{
font-family: 'Fabrica';
}
}
/* Desktops and laptops ----------- */
#media screen and (min-device-width: 1024px){
/* Styles */
#primary {
width: 50%;
float: left;
padding:10px;
}
#secondary {
width: 40%;
float: right;
padding:10px;
}
}
#font-face {
font-family: 'Fabrica';
font-style: normal;
font-weight: 100;
src: local('Fabrica'), local('Fabrica'), url(path/Fabrica.otf) format('otf');
}
Main CSS:
/***********************
GENERAL
***********************/
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
}
body {
/*font-family: 'Fabrica', 'Courier New';*/
font-family: 'Open Sans', sans-serif;
background-color:#e6e9ed;
color: #434a54;
}
#wrapper{
max-width:960px;
margin: 0 auto;
background-color: #f5f7fa;
overflow: auto; /*This fixed the wrapper background color problem that happened bc floating content*/
line-height: 1.8em;
}
#wrapper img {
border-radius:5px 20px 5px;
}
#wrapper p {
text-indent: 2.5em;
}
#banner {
margin-left: auto;
margin-right:auto;
padding: 0;
display:block;
clear:both;
}
#content {
padding:20px 40px;
padding-bottom:50px;
}
h1, h2, h3 {
font-family: 'Droid Serif', serif;
}
/***********************
HEADER - Top image strip above banner
***********************/
#logo {
text-align:right;
max-height:100%;
max-width:100%;
padding: 10px 0px 10px 30px;
}
#header {
background-image: url(../img/header.jpg);
background-repeat: no-repeat;
background-position: top;
margin: 0 auto;
max-width:960px;
}
/*Commented out for testing new header technique
#header {
margin-left: auto;
margin-right: auto;
padding: 0;
display: block;
clear: both;
font-family: 'Fabrica', Arial;
}
*******/
/***********************
NAVIGATION - Main site navigation
***********************/
nav{
background-color:#4888dc;
text-align:center;
color:blue;
max-width:960px;
margin: 0 auto;
text-align:center;
font-size:1.2em;
}
nav ul{
list-style:none;
margin:0 10px; /*Can be change later on in the design if it doesn't work*/
}
nav li{
/*Inline, mostly text. Appears in the same line, inline as the rest of the text. Block
pushes other items out of the page. Inline block maintains width and
height but is in line with other images*/
display:inline-block;
list-style:none;
padding: .4em 1.5em;
}
nav a {
font-weight: 800;
}
nav a:visited, nav a:link {
color:#f5f7fa;
text-decoration: none;
}
nav a:hover {
color:#0B108C;
text-decoration: none;
}
/**********************
FOOTER
**********************/
footer {
font-family: 'Open Sans', sans-serif;
max-width:950px;
background-color:#434a54;
font-size:0.75em;
clear:both;
color:#e6e9ed; overflow:auto;
margin: 0 auto;
padding:5px;
}
footer h3{
padding-left: .9em;
font-family: 'Open Sans', sans-serif;
}
footer ul {
display:inline-block;
list-style-type: none;
}
footer ul li{
list-style:none;
text-decoration:none;
margin-left: 1em;
}
footer ul li a{
color:#e6e9ed;
}
footer a:hover {
color:#FFFFFF; /*Change hover color to make it more prominent*/
}
/**********************
RIGHT SIDE OF FOOTER
**********************/
#footer-right {
float:right;
margin-right:15px;
}
.social-icon {
display:inline-block;
width:24px;
height:24px;
margin-bottom:22.7px; /*controls height of "follow us" in footer*/
padding:1px;
border-radius: 20%;
}
/**********************
LEFT SIDE OF FOOTER
**********************/
#footer-left {
float:left;
padding-left: 2em;
text-align:left;
font-size: 1.35em;
display:inline-block;
line-height: 1.5em;
}
#footer-slogan {
font-family: 'Georgia', 'Droid Serif', sans-serif;
}
#copyright{
font-size: .75em;
text-align:left;
margin-top: 5px;
display:inline-block;
font-family: 'Open Sans', sans-serif;
}

Answer 1

I use this media query for my responsive design that I use on marketing platform to blast out to users:
#media screen and (max-width: 000px), screen and (max-device-width: 000px)
this works on android, iphone4,5,6 and ipad +other tablets

Answer 2

Use min-width and max-width instead of min-device-width and max-device-width. Device width refers to the display's resolution, i.e. 1024x800, not the size of the window.