Reponsive styling Issue - html

Question

I am developing a wordpress them and the homepage consists of a fixed header and footer and a vertical slider in the middle including content and images. I am building the website responsive but what I am noticing is that when the screen is resized the content in the vertical sliders is being cut off(Forget the images - just the boxes with the title and text). How can I make the main cont always start beneath the header and above the footer ?
Here is a js fiddle of what I am talking about: http://jsfiddle.net/tdWb9/
Some css:
#charset "UTF-8";
/* CSS Document */
* {
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
}
/* Style for our header texts
* --------------------------------------- */
h1{
font-size: 4em;
color: #fff;
margin:0;
padding :0;
}
html,body{
margin: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.home-button {
-moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
-webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
box-shadow:inset 0px 1px 0px 0px #cae3fc;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #00baf2) );
background:-moz-linear-gradient( center top, #79bbff 5%, #00baf2 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#00baf2');
background-color:#79bbff;
-webkit-border-top-left-radius:10px;
-moz-border-radius-topleft:10px;
border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-topright:10px;
border-top-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-bottomright:10px;
border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-bottomleft:10px;
border-bottom-left-radius:10px;
text-indent:0;
border:1px solid #469df5;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:17px;
font-weight:bold;
font-style:normal;
height:38px;
line-height:38px;
width:128px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #287ace;
}
.home-button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00baf2), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #00baf2 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00baf2', endColorstr='#79bbff');
background-color:#00baf2;
}.home-button:active {
position:relative;
top:1px;
}
.home-button h3{
text-align:center;
}
.intro{
background-color: rgba(255, 255, 255, 0.8);
width:30%;
border-radius:10px;
padding-bottom:20px;
padding-left:3%;
padding-right:3%;
margin-left:10%;
}
.intro2{
background-color:white;
width:30%;
border-radius:10px;
opacity:0.8;
filter:alpha(opacity=80);
padding-bottom:20px;
margin-right:10%;
float:right;
}
.intro h1, .intro2 h1{
color:black;
padding-top:3%;
}
.intro p, .intro2 p{
color: black;
}
/* Centered texts in each section
* --------------------------------------- */
.section{
text-align:left;
}
/* Backgrounds will cover all the section
* --------------------------------------- */
#section0,
#section1,
#section2,
#section3{
background-size: cover;
}
/* Defining each sectino background and styles
* --------------------------------------- */
#section0{
background-image: url(images/image1.jpg);
}
#section2{
background-image: url(images/image2.jpg);
}
#section3{
background-image: url(images/image3.jpg);
}
/* Overwriting styles for control arrows for slides
* --------------------------------------- */
.controlArrow.prev {
left: 50px;
}
.controlArrow.next{
right: 50px;
}
/* Fixed header and footer.
* --------------------------------------- */
#header, #footer{
display:block;
width: 100%;
background: #05556d;
text-align:center;
color: #f2f2f2;
}
#footer{
padding:10px 0px;
font-size:12px;
}
.home #header, .home #footer{
position:fixed;
z-index:9;
}
.home #header{
top:0px;
}
.home #footer{
bottom:0px;
}
#footer a{
color:#00baf2;
}
#footer-other{
z-index:9999;
width: 100%;
background: #05556d;
text-align:center;
color: #f2f2f2;
}
#footer-other{
padding:10px 0px;
font-size:12px;
}
#footer-other a{
color:#00baf2;
}
/* Bottom menu
* --------------------------------------- */
#infoMenu {
bottom: 80px;
}
#infoMenu li a {
color: #fff;
z-index: 999;
}
*Main Menu CSS*/
#import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
#cssmenu {padding: 0; margin: 0; border: 0;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
#cssmenu ul {position: relative; z-index: 597; }
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598;}
#cssmenu ul ul li {float: none;}
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: normal;}
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }
#cssmenu {
background: #05556d;
border-bottom: 4px solid #00baf2;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 16px;
}
#cssmenu > ul { *display: inline-block; }
#cssmenu:after, #cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #05556d;
color: #CBCBCB;
padding: 0 20px;
}
#cssmenu ul { text-transform: uppercase; }
#cssmenu ul ul {
border-top: 4px solid #1b9bff;
text-transform: none;
min-width: 190px;
}
#cssmenu ul ul a {
background: #1b9bff;
color: #FFF;
border: 1px solid #0082e7;
border-top: 0 none;
line-height: 150%;
padding: 16px 20px;
}
#cssmenu ul ul ul { border-top: 0 none; }
#cssmenu ul ul li { position: relative }
#cssmenu > ul > li > a { line-height: 80px; }
#cssmenu ul ul li:first-child > a { border-top: 1px solid #0082e7; }
#cssmenu ul ul li:hover > a { background: #00baf2; }
#cssmenu ul ul li:last-child > a {
border-radius: 0 0 3px 3px;
box-shadow: 0 1px 0 #1b9bff;
}
#cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; }
#cssmenu ul ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#cssmenu ul li:hover > a, #cssmenu ul li.current-menu-item > a {
background: #00baf2;
color: #FFF;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
margin-left: 5px;
}
#down{display:none}
#cssmenu ul li.last ul {
left: auto;
right: 0;
}
#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%;
}
.logo{
margin-top:5px;
float:left;
margin-left:20%;
padding-right:10px;
position:relative;
z-index:10000;
}
#Media screen and (max-width:480px) {
.intro{
width:70%;
margin-top:20%;
}
.intro h1, .intro2 h1{
color:black;
padding-top:3%;
}
.intro p, .intro2 p{
color: black;
}
.main-container{
width:85% !important;
}
#sbs{position: absolute;
width: 20px;
padding: 8px;
cursor:pointer;
height: 20px;
border: 0px solid white;
border-radius: 5px;
top: 5px;
left: 10px;}
.sb{width: 100%;
height: 4px;
display: inline-block;
border-bottom: 2px solid white;
float: left;
clear: both;}
#down{cursor:pointer;display:table;width:350px; margin:0 auto; margin-bottom:10px; text-align:center;padding: 15px 0px; background: #00baf2; color: white;margin-top: 10px;position:relative;}
#cssmenu *:not{ float :left !important; width: 100%;padding-left: 0px !important; padding-right: 0px !important;}
#cssmenu {
width: 87%;
display: table;
margin: 0 auto;
}
#down + #cssmenu { display: none;}
#down.open + #cssmenu { display: block;}
.logo{margin:0;padding:0;width: 100%;text-align: center;margin-bottom:10px;}
#cssmenu .logo > a{margin:0;padding:0}
#cssmenu ul li { display: block ; width: 100% ; text-align:center; }
#cssmenu > ul > li > a { line-height: 50px; }
#cssmenu ul ul {
border-top: 4px solid #1b9bff;
text-transform: none;
width: 100%;
/* float: left; */
}
#cssmenu ul ul ul {display:none;}
#cssmenu .has-sub:hover > ul {
border-top: 0 none;
visibility:visible;
display: block;
float: left;
clear: both;
position:relative;
right: 0;
}
#cssmenu ul li.hover, #cssmenu ul li:hover{
display:inline-block;
}
.content1{font-size:100%;}
}
}
#Media screen and (max-width:768px) {
.logo{ margin-left:10%;}
}
.login{
background-color:#00baf2;
width:5%;
margin-right:10%;
margin-top:-60px;;
float:right;
padding:10px 10px 10px 10px;
}
.main-container{
width:60%;
height:100%;
margin-left:auto;
margin-right:auto;
padding-top:3%;
}
.imgsection{
float:left;
padding-right:5%;
}
.main-container img{
max-width:100% !important;
height:auto;
display:block;
}

Answer 1

It's hard to tell because the text wont feet all in the page because it's a slider, so when you pull down to see more text it will change to the next slider,
The best way that I find better and simpliest to do it is by adding this css code:
p {font-size:82%}
Or if you want to keep the font-size to 100% you can do it by adding this css code which makes the div scroll:
.section{
height:55%;
overflow-y: scroll;
overflow-x: hidden;
}
.intro{
height:55%;
overflow-y: scroll;
overflow-x: hidden;
}
I think the scroll will work fine as you drag the mobile mouse into the text area without conflict with changing to the next slide, but I can't tell for sure because I'm not testing it on a mobile, but you can do the test.
Or... in a last resort, you could create a smaller logo and put it on the left side of the menu and compact the header size.
Regards