Отзывчивый css не отвечает

Question

The Responsive.css еще не завершен, но он отвечает в соответствии с размером устройства. Возникающие проблемы состоят в том, что при изменении размера экрана справа раздел с заголовком Memorial, изображение ниже и некоторый текст неправильно стекаются, когда экран уменьшается по размеру. Вместо этого он будет нажат вниз, но останется на правой стороне экрана. Также возникают проблемы с изменением размера изображений, которые я отобразил на своих сайтах. Я бы хотел изменить размер устройства таким образом. У меня есть изображение логотипа и изображение баннера, а поверх этих двух изображений - панель навигации, с которой у меня возникает проблема с изменением размера и ее прозрачность из-за того, что панель навигации находится на сером фоне. Как я могу сделать его прозрачным поверх баннера и логотипа.

<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><a href="#">This is how a link looks.</a></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><a href="">Contact Us</a></li> 
      <li><a href="">FAQ's</a></li> 
      <li><a href="">Site Map</a></li> 
     </ul> 
     <ul><h3>SUPPORT OUR CAUSE</h3> 
      <li><a href="">Donate</a></li> 
      <li><a href="">Volunteer</a></li> 
      <li><a href="">Fundraising Events</a></li> 
     </ul> 
     <ul><h3>FOLLOW US</h3> 
      <li> 
       <a href="#Facebook handle here"><img src="img/facebook-icon.png" alt="Facebook Logo" class="social-icon"></a> 
       <a href="#Instagram handle here"><img src="img/instagram-icon.png" alt="Instagram Logo" class="social-icon"></a> 
       <a href="#Twitter handle here"><img src="img/twitter-icon.png" alt="Twitter Logo" class="social-icon"/></a> 
       <a href="#Pinterest handle here"><img src="img/pinterest-icon.png" alt="Pinterest Logo" class="social-icon"/></a> 
      </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&copy; 2014 International Child Advocacy Network</p> 
    </div> 
</footer> 

Адаптивный 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'); 
} 

Главная 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

Использование min-width и max-width вместо min-device-width и max-device-width. Ширина устройства относится к разрешению дисплея, то есть 1024x800, а не к размеру окна.

Answer 2

Я использую этот медиа-запрос для моего адаптивный дизайн, который я использую на маркетинговую платформу, чтобы взорвать из пользователей:

@media screen and (max-width: 000px), screen and (max-device-width: 000px) 

это работает на Android, iphone4,5,6 и Ipad + другие таблетки