Responsive CSS issues - html

Question

I am using #media to have certain styles for devices. However, it is having issue for tablets and phones. I am currently using a S3 and a hd 7 memo pad tablet to test the responsive aspect of my website. when I am on landscape mode on the S3, the content is not stacked on each other. This feature I would like to have for the tablet but however it does not do it when the tablet is on landscape mode. I would like to know what I am doing wrong. Another issue I am having is the footer. When I am on my tablet, phone, or laptop, there is weird spacing when browser shrinks. I would like to know how to fix the issue. Thank You
/***********************
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

Looking at the media query that targets the landscape orientation, the only two elements it mentions (other than the footer), are the ones with id=primary and id=secondary. One of these is floated right, the other floated left, so they won't stack - this will cause them to float to opposite sides of the screen.
In your media query remove the floating and make sure they are both display:block - then they will stack one above the other. (Note: I assume you only have one each of the #primary and #secondary elements, since an id can only be used once on a page).