Отзывчивые проблемы с CSS

Question

Я использую @media для создания определенных стилей для устройств. Однако это проблема для планшетов и телефонов. В настоящее время я использую планшет S3 и hd 7, чтобы проверить отзывчивый аспект моего веб-сайта. когда я нахожусь в ландшафтном режиме на S3, содержимое не складывается друг на друга. Эта функция, которую я хотел бы использовать для планшета, но, тем не менее, это не так, когда планшет находится в альбомном режиме. Я хотел бы знать, что я делаю неправильно. Еще одна проблема, с которой я столкнулся, - это нижний колонтитул. Когда я нахожусь на своем планшете, телефоне или ноутбуке, есть странный интервал, когда браузер сжимается. Я хотел бы знать, как решить проблему. Спасибо

     /*********************** 
GENERAL 
***********************/ 
a { 
text-decoration: underline; 
} 

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; 
} 

.selected { 
color:#0B108C; 
text-decoration: none; 
} 


    /*********************** 
    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; 
} 


nav ul li a.selected { /*Highlights current page for users*/ 
color:#0B108C; 
} 


/********************** 
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; 
text-decoration:none; 
} 

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; 
} 

/*********************** 
CONTENT TEMPLATE - Content template for all other pages 
***********************/ 

/*Responsive.css*/ 

/*This is the placeholder for responsive CSS that we will implement for mobile design*/ 

/* Smartphones ----------- */ 
@media screen and (max-width: 519px){ 
/* Styles */ 

#content{ 
float:none; 
padding:0; 
width: auto; 
} 

img{ 
max-width: 100%; 
height: auto; 
width:auto\9; /*for ie8*/ 
} 

body{ 
float:left; 
font-family: 'Fabrica'; 
} 

#logo { 
margin-right:auto; 
max-width: 100%; 
height: auto; 
padding: 0; 
} 

#wrapper{ 
margin: 0 auto; 
} 
#wrapper p{ 
text-indent: 0; 
} 

h1, h2, h3 { 
font-family: 'Fabrica'; 
} 

nav{ 
position: relative; 
min-height: 40px; 
} 

nav ul{ 
position:absolute; 
width: 180px; 
padding: 5px,0; 
top: 0; 
left: 0; 
border: solid 1px #aaa; 
background: #fff url(../img/menu-bar-mobile.jpg) no-repeat 10px 11px; 
border-radius: 5px; 
box-shadow: 0 1px 2px rgba(0,0,0,.3); 
} 

nav ul:hover li{ 
display: block; 
margin: 0 0 5px; 
} 

nav a:hover { 
display:block; 
} 

nav li{ 
display:none; 
margin:none; 
} 

#banner{ 
display: none; 
} 

footer{ 
font-family: 'Fabrica'; 
float:left; 
} 
} 

/*Ipads and Tablets*/ 
@media screen and (min-width:520px) and (max-width: 959px) and (orientation: landscape){ 
footer{ 
font-family: 'Fabrica'; 
float: left; 
} 

body{ 
font-family: 'Fabrica'; 
} 

#primary { 
width: 55%; 
float: left; 
padding:10px; 
} 

#secondary { 
width: 30%; 
float: right; 
padding:10px; 
} 
} 

/* Desktops and laptops ----------- */ 
@media screen and (min-width: 1200px){ 
/* Styles */ 
#primary { 
width: 55%; 
float: left; 
padding:10px; 
} 

#secondary { 
width: 30%; 
float: right; 
padding:10px; 
} 
} 

/************************************* 
TWO COLUMN LAYOUT 

Will target anything larger than average smartphone. 
This is helpful for normal sized tablets, very large smartphones, and very small desktop windows. 
***************************************/ 
@font-face { 
font-family: 'Fabrica'; 
font-style: normal; 
font-weight: 100; 
src: local('Fabrica'), local('Fabrica'), url(path/Fabrica.otf) format('otf'); 
} 

Answer 1

Глядя на запрос СМИ, ориентированном в альбомной ориентации, только два элемента, он упоминает (кроме сноске), являются те, с ид = первичный и вторичный идентификатор =. Один из них плавает вправо, другой плавает влево, поэтому они не будут складываться - это заставит их плавать на противоположных сторонах экрана.

В запросе на медиаданные удалите плавающие и убедитесь, что они оба отображаются: блок - тогда они будут складываться один над другим. (Примечание. Я предполагаю, что у вас есть только один из #primary и # вторичных элементов, поскольку идентификатор можно использовать только один раз на странице).