Responsive html the tablet resolution css messes up the desktop resolution css - html

Question

I'm making a responsive demo website and i'm having trouble with the medium resolution as when i put the css for it in my style sheet the high res no longer works. anyone know why that is/ how to fix it? My code below:
#charset "utf-8";
/* CSS Document */
/* low res or phone */
#media only screen and (max-width: 480px) {
.LoginStuff li
{
display: inline;
float: right!important;
position:relative;
top: -50px;
right: 10px;
}
.reg1 a
{
border-radius: 0px 3px 3px 0px;
border-left-width: 1px;
border-left-style:solid;
border-left-color:#ce542c;
padding: 5px 5px;
font-size:15px;
font-family:Arial;
font-weight:bold;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
}
.log1 a
{
border-radius: 3px 0px 0px 3px;
border-right-width: 0.5px;
border-right-style:solid;
border-right-color:#ce542c;
padding: 5px 12px;
font-size:15px;
font-family:Arial;
font-weight:bold;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
}
.nav
{
visibility: hidden;
}
/*start menu*/
.clearfix a
{
background-color:#f7cf1c;
margin-right:auto;
margin-left:auto;
width:277px;
height:30px;
position:relative;
left: -34px;
}
.AMenu
{
margin-right:auto;
margin-left:auto;
padding-left: 100px;
position:relative;
left:35px;
}
.menu-wrap
{
width:100%;
background-color:#f7cf1c;
align-content:center;
margin-right:auto;
margin-left:auto;
}
.menu
{
width:100%;
height:40px;
background-color:#f7cf1c;
position:relative;
margin-left:auto;
margin-right:auto;
}
.menu li {
margin:0px;
text-decoration:none;
list-style:none;
font-family:"Alfa Slab One";
margin-right:auto;
margin-left:auto;
}
.menu a {
transition:all linear 0.15s;
text-decoration:none;
color:#fff;
margin-right:auto;
margin-left:auto;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
display:inline-block;
position:relative;
font-size:19px;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.menu li:active .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
background:#f7cf1c;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
/*finish menu*/
.topnav
{
margin-bottom: 10px;
}
.mobistrip
{
width: 200px;
height: 200px;
margin-right:auto;
margin-left:auto;
background-color:#f7cf1c;
position:relative;
left: 0px;
}
.createYearbook
{
position:relative;
left:0px;
margin-right:auto;
margin-left:auto;
padding-bottom:20px;
width:350px;
height:50px;
font-family:"Alfa Slab One";
font-size: 15px;
font-weight:lighter;
text-align:center
}
.createYearbook a
{
color: #000;
text-decoration:none;
background-color:#ce542c;
padding: 5px 15px;
border-radius: 3px 3px 3px 3px;
}
.continue
{
position:relative;
left:0px;
margin-right:auto;
margin-left:auto;
width:340px;
height:50px;
text-align:center;
}
.continue a
{
font-size:24px;
font-family:Arial;
font-weight:bolder;
color: #fff;
background-color:#ce542c;
text-decoration:none;
padding: 10px 10px;
border-radius: 3px 3px 3px 3px;
}
.undernav li
{
position:relative;
top: -150px;
display:inline;
height: 50px;
}
.ach
{
width:450px;
height:50px;
padding-top:20px;
padding-bottom:20px;
position:relative;
left:0px;
top: 140px;
}
.ach a
{
font-family:Arial;
font-size:25px;
color:#4e4d4d;
font-weight:bold;
text-decoration:none;
padding-right: 25px;
padding-left: 25px;
padding-bottom:20px;
border-bottom-width:8px;
border-bottom-color:#4e4d4d;
border-bottom-style:solid;
}
.jumbotron
{
visibility: hidden;
padding: 0px;
}
/*choose size Stuff*/
.ChooseSizeA2
{
width:237px;
font-family:Arial;
font-size:15px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
position:relative;
top:-900px;
margin-right:auto;
margin-left:auto;
}
.ChooseSize
{
align-content:center;
background-color:#fff;
}
.picksize
{
position:relative;
top:-900px;
left: -15;
margin-right:auto;
margin-left:auto;
}
.sizepics img
{
background-color:#fff;
border-width:6px;
border-color:#f7cf1c;
border-style:solid;
margin-right:auto;
margin-left:auto
}
}
/* med res or ipad */
#media only screen and (min-width: 481px) {
.nav
{
visibility:hidden;
}
.LoginStuff li
{
display: inline;
float: right!important;
position:relative;
top: -50px;
right: 10px;
}
.reg1 a
{
border-radius: 0px 3px 3px 0px;
border-left-width: 1px;
border-left-style:solid;
border-left-color:#ce542c;
padding: 10px 10px;
font-size:20px;
font-family:Arial;
font-weight:bold;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
}
.log1 a
{
border-radius: 3px 0px 0px 3px;
border-right-width: 0.5px;
border-right-style:solid;
border-right-color:#ce542c;
padding: 10px 20px;
font-size:20px;
font-family:Arial;
font-weight:bold;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
}
.nav
{
visibility: hidden;
}
/*start menu*/
.clearfix a
{
background-color:#f7cf1c;
margin-right:auto;
margin-left:auto;
width:300px;
height:20px;
padding-bottom:10px;
position:relative;
left: -30px;
}
.AMenu
{
margin-right:auto;
margin-left:auto;
padding-left: 100px;
position:relative;
left:40px;
}
.menu-wrap
{
width:100%;
background-color:#f7cf1c;
align-content:center;
margin-right:auto;
margin-left:auto;
}
.menu
{
width:100%;
height:68px;
background-color:#f7cf1c;
position:relative;
margin-left:auto;
margin-right:auto;
}
.menu li
{
margin:0px;
text-decoration:none;
list-style:none;
font-family:"Alfa Slab One";
margin-right:auto;
margin-left:auto;
position:relative;
top: 15px;
}
.menu a
{
transition:all linear 0.15s;
text-decoration:none;
color:#fff;
margin-right:auto;
margin-left:auto;
}
.menu .arrow
{
font-size:24px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li
{
display:inline-block;
position:relative;
font-size:24px;
}
.menu > ul > li > a
{
padding:0px 20px;
display:inline-block;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu
{
z-index:1;
opacity:1;
}
.menu li:active .sub-menu
{
z-index:1;
opacity:1;
}
.sub-menu
{
width:500px;
height:300px;
padding:0px 0px;
padding-bottom:60px;
padding-top:20px;
padding-left:35px;
position:absolute;
top:100%;
left:-100px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
background:#f7cf1c;
border-radius: 0px 0px 3px 3px;
}
.sub-menu li
{
display:block;
font-size:25px;
}
.sub-menu li a
{
padding:20px 20px;
display:block;
}
/*finish menu*/
.topnav
{
margin-bottom: 10px;
}
.createYearbook
{
position:relative;
left:-10px;
bottom:90px;
margin-right:auto;
float:left;
padding-bottom:50px;
width:500px;
height:70px;
font-family:"Alfa Slab One";
font-size: 14px;
font-weight:lighter;
text-align:center
}
.createYearbook h1
{
width:380px;
}
.createYearbook a
{
color: #000;
text-decoration:none;
background-color:#ce542c;
padding: 15px 30px;
border-radius: 3px 3px 3px 3px;
}
.continue
{
position:relative;
right:-10px;
bottom: 209px;
float:right;
margin-left:auto;
width:400px;
height:70px;
text-align:center;
}
.continue a
{
font-size:28px;
font-family:Arial;
font-weight:bolder;
color: #fff;
background-color:#ce542c;
text-decoration:none;
padding: 17.4px 10px;
border-radius: 3px 3px 3px 3px;
}
.undernav li
{
position:relative;
top: -300px;
display:inline;
height: 50px;
}
.ach
{
width:600px;
height:50px;
padding-top:20px;
padding-bottom:20px;
position:relative;
left:-10px;
top: 140px;
margin-right:auto;
margin-left:auto;
}
.ach a
{
font-family:Arial;
font-size:32px;
color:#4e4d4d;
font-weight:bold;
text-decoration:none;
padding-right: 25px;
padding-left: 25px;
padding-bottom:20px;
border-bottom-width:8px;
border-bottom-color:#4e4d4d;
border-bottom-style:solid;
margin-right:10px;
margin-left:10px;
}
.circlesT
{
visibility:hidden;
}
.jumbotron
{
padding-top: 20px;
background-image:url(http://yourprintsolution.co.uk/littlechickdemo/pics/pic_1.gif);
height: 200px;
background-repeat: no-repeat;
background-size: cover;
position:relative;
top: 10px;
}
.jumbotron .container
{
position: relative;
background-color:transparent;
}
.jumbotron h1
{
color: #fff;
font-size: 20px;
font-family:"Alfa Slab One";
text-outline:#DFDFDF;
background-color:transparent;
padding-left:140px;
position:relative;
bottom:50px;
display: inline;
float: left!important;
margin-right: auto;
}
/*choose size Stuff*/
.ChooseSizeA2
{
width:237px;
font-family:Arial;
font-size:15px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
position:relative;
top:-0px;
margin-right:auto;
margin-left:auto;
}
.ChooseSize
{
align-content:center;
background-color:#fff;
}
.picksize
{
position:relative;
top:0px;
left: -15;
margin-right:auto;
margin-left:auto;
}
.sizepics img
{
background-color:#fff;
border-width:6px;
border-color:#f7cf1c;
border-style:solid;
margin-right:auto;
margin-left:auto
}
}
/* high res or computer */
#media only screen and (min-width: 1024px) {
.menu-wrap
{
visibility: hidden;
}
.bg
{
background-color:#fff;
}
.filler
{
width: 100%;
height: 200px;
background-color:#f7cf1c;
}
.fillera
{
padding-top:30px;
background-color:#fff;
}
*
{
background-color:#eae9e9;
}
.LoginStuff li
{
display: inline;
float: right!important;
position:relative;
top: 140px;
}
.reg1 a
{
border-radius: 0px 3px 3px 0px;
border-left-width: 1px;
border-left-style:solid;
border-left-color:#ce542c;
padding: 14px 10px;
font-size:18px;
font-family:Arial;
font-weight:bold;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.reg1 a:hover
{
border-radius: 0px 3px 3px 0px;
border-left-width: 1px;
border-left-style:solid;
border-left-color:#ce542c;
padding: 14px 10px;
font-size:18px;
font-family:Arial;
font-weight:bold;
color: #000;
background-color:#ce542c;
text-decoration:none;
}
.log1 a
{
border-radius: 3px 0px 0px 3px;
border-right-width: 1px;
border-right-style:solid;
border-right-color:#ce542c;
padding: 14px 20px;
font-size:18px;
font-family:Arial;
font-weight:bold;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.log1 a:hover
{
border-radius: 3px 0px 0px 3px;
border-right-width: 1px;
border-right-style:solid;
border-right-color:#ce542c;
padding: 14px 20px;
font-size:18px;
font-family:Arial;
font-weight:bold;
color: #000;
background-color:#ce542c;
text-decoration:none;
}
.list
{
padding-top:200px;
}
.nav{
padding-top:200px;
}
.nav ul {
padding-left: 0;
}
.nav a {
padding: 30px 20px;
font-size:22px;
font-family:"Alfa Slab One";
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
float: left!important;
margin-right: auto;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.nav a:hover
{
padding: 30px 20px;
font-size:22px;
font-family:"Alfa Slab One";
color: #000;
background-color:#ce542c;
text-decoration:none;
float: left!important;
margin-right: auto;
}
.nav li {
display: inline;
float: left!important;
margin-right: auto;
}
.hide
{
visibility: hidden;
}
.createYearbook
{
padding-top:50px;
width:330px;
height:70px;
font-family:"Alfa Slab One";
font-size:14px;
font-weight:lighter;
float:left;
text-align:left;
}
.createYearbook a
{
color:#f7cf1c;
padding: 10px 10px;
border-radius: 3px 3px 3px 3px;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
text-decoration:none;
}
.createYearbook a:hover
{
color: #fff;
background-color:#f7cf1c;
padding: 10px 10px;
border-radius: 3px 3px 3px 3px;
}
.undernav li
{
display:inline;
padding: 15px 20px;
height: 70px;
}
.ach
{
width:500px;
height:70px;
float:right;
padding-top:50px;
padding-bottom:0px;
}
.ach a
{
font-family:Arial;
font-size:24px;
color:#4e4d4d;
font-weight:bold;
text-decoration:none;
padding: 28px 10px;
border-bottom-width:8px;
border-bottom-color:#eae9e9;
border-bottom-style:solid;
transition-property:all;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.ach a:hover
{
font-family:Arial;
font-size:24px;
color:#4e4d4d;
font-weight:bold;
text-decoration:none;
padding: 28px 10px;
border-bottom-width:8px;
border-bottom-color:#4e4d4d;
border-bottom-style:solid;
}
.continue
{
width:340px;
height:70px;
float:right!important;
padding-top:50px;
text-align:right;
}
.continue a
{
font-size:24px;
font-family:Arial;
font-weight:bolder;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
padding: 14px 10px;
border-radius: 3px 3px 3px 3px;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.continue a:hover
{
font-size:24px;
font-family:Arial;
font-weight:bolder;
color: #000;
background-color:#ce542c;
text-decoration:none;
padding: 14px 10px;
border-radius: 3px 3px 3px 3px;
}
.pic img
{
padding-top: 8px;
background-color:transparent;
}
.jumbotron {
padding-top: 20px;
background-image:url(http://yourprintsolution.co.uk/littlechickdemo/pics/pic_1.gif);
height: 500px;
background-repeat: no-repeat;
background-size: cover;
position:relative;
top: 130px;
}
.jumbotron .container {
position: relative;
background-color:transparent;
}
.jumbotron h1 {
color: #fff;
font-size: 44px;
font-family:"Alfa Slab One";
background-color:transparent;
padding-left:380px;
display: inline;
float: left!important;
margin-right: auto;
}
.circlesT
{
padding-top:400px;
background-color:transparent!important;
padding-left:80px;
padding-right:80px;
}
.circlesT a
{
background-color:#fff;
}*
{
background-color:#eae9e9;
}
.thumbnail{
max-width: 360px;
margin-right: auto;
display:inline;
float: left!important;
}
.list
{
padding-top:200px;
}
.a1
{
width:25%;
display:inline;
padding-left:6%;
padding-right:6%;
background-color:#fff;
}
.a1 img
{
background-color:transparent!important;
}
.mobiBG
{
height:91px;
width:100%;
background-color:#f7cf1c;
}
/*Teacher Login Stuff*/
.pagelogin
{
padding-top:20px;
padding-bottom:20px;
padding-left:300px;
}
.Tlogin form
{
background-color:#fff;
}
.Tlogin p
{
background-color:#fff;
}
.Tlogin
{
background-color:#fff;
width:400px;
padding: 20px;
}
/*Choose Size Stuff*/
.ChooseSize
{
padding-top:220px;
align-content:center;
background-color:#fff;
}
.ChooseSize h1
{
background-color:#fff;
}
.ChooseSizeA2
{
width:500px;
font-family:Arial;
font-size:27px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
}
.picksize
{
width:100%;
background-color:#fff;
}
.sizepics
{
width:30%;
display:inline;
padding: 10px;
background-color:#fff;
}
.sizepics a
{
background-color:#fff;
border-width:6px;
border-color:#fff;
border-style:solid;
}
.sizepics img
{
background-color:#fff;
border-width:13px;
border-color:#fff;
border-style:solid;
transition-property:all;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.sizepics img:hover
{
background-color:#fff;
border-width:13px;
border-color:#f7cf1c;
border-style:solid;
}
/*Year Group YG*/
.ChooseYG
{
padding-top:220px;
align-content:center;
background-color:#fff;
}
.ChooseYG h1
{
background-color:#fff;
}
.ChooseYGA2
{
width:800px;
font-family:Arial;
font-size:27px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
}
/*Choose Cover 8x8 Stuff*/
.choosecover8x8
{
padding-top:220px;
align-content:center;
background-color:#fff;
}
.choosecover8x8 h1
{
background-color:#fff;
}
.a2-8x8
{
width:500px;
font-family:Arial;
font-size:27px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
}
.pickcover8x8
{
width:100%;
background-color:#fff;
}
.cover8x8pics
{
width:30%;
display:inline;
padding: 10px;
background-color:#fff;
}
.cover8x8pics a
{
background-color:#fff;
border-width:6px;
border-color:#fff;
border-style:solid;
}
.cover8x8pics img
{
background-color:#fff;
border-width:13px;
border-color:#fff;
border-style:solid;
transition-property:all;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.cover8x8pics img:hover
{
background-color:#fff;
border-width:13px;
border-color:#f7cf1c;
border-style:solid;
}
/*Choose Cover 6x8 Stuff*/
.choosecover6x8
{
padding-top:220px;
align-content:center;
background-color:#fff;
}
.choosecover6x8 h1
{
background-color:#fff;
}
.a2-6x8
{
width:500px;
font-family:Arial;
font-size:27px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
}
.pickcover6x8
{
width:100%;
background-color:#fff;
}
.cover6x8pics
{
width:30%;
display:inline;
padding: 10px;
background-color:#fff;
}
.cover6x8pics a
{
background-color:#fff;
border-width:6px;
border-color:#fff;
border-style:solid;
}
.cover6x8pics img
{
background-color:#fff;
border-width:13px;
border-color:#fff;
border-style:solid;
transition-property:all;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.cover6x8pics img:hover
{
background-color:#fff;
border-width:13px;
border-color:#f7cf1c;
border-style:solid;
}
/*Build Yearbook Stuff*/
.BuildYearbook
{
padding-top:220px;
align-content:center;
background-color:#fff;
}
.BuildYearbook h1
{
background-color:#fff;
}
.BuildYearbookA2
{
width:800px;
font-family:Arial;
font-size:27px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
}
.price
{
font-family: Arial;
font-size:32px;
color:#e15152;
font-weight:bold;
background-color:#fff;
padding: 20px;
}
.BuildButton
{
padding: 25px;
background-color:#fff;
}
.BuildButton a
{
font-size:30px;
font-family:"Alfa Slab One";
color: #fff;
text-decoration:none;
background-color:#f7cf1c;
text-decoration:none;
border-radius: 3px 3px 3px 3px;
padding: 25px 50px;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.BuildButton a:hover
{
font-size:30px;
font-family:"Alfa Slab One";
color: #000;
background-color:#ce542c;
text-decoration:none;
text-decoration:none;
border-radius: 3px 3px 3px 3px;
padding: 25px 50px;
}
.info
{
font-family:Arial;
font-size:24px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
padding:30px;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Yearbooks - Size</title>
<link rel="stylesheet" type="text/css" media="all" href="styles1.css">
</head>
<body>
<div class="top">
<div class="thumbnail">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/Logo-01.png" width="177" height="183" alt="0">
</div>
<div class="LoginStuff">
<ul>
<div class="reg1"><li class="reg">Register</li></div>
<div class="log1"><li class="login">Login</li></div>
</ul>
</div>
</div>
<!-- Mobile Menu -->
<div class="menu-wrap" align="center">
<nav class="menu" align="center">
<ul class="clearfix">
<li>
<div class="AMenu" align="center">▼</span></div>
<ul class="sub-menu">
<li>Yearbooks</li>
<li>Leaving Cards</li>
<li>Mugs</li>
<li>School Calendars</li>
<li>Teachers Section</li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- Normal Menu -->
<div class="nav" style="height:100%; width:100%;">
<ul>
<div class="Yearbooks"><li>Yearbooks</li></div>
<div class="LeavingCards"><li>Leaving Cards</li></div>
<div class="Mugs"><li>Mugs</li></div>
<div class="SchoolCalendars"><li>School Calendars</li></div>
<div class="TeacherSection"><li>Teachers Section</li></div>
</ul>
</div>
<div class="mobiBG"></div>
<div class="undernav">
<div class="createYearbook">
<h1>Create a Yearbook</h1>
</div>
<div class="continue">
<!-- same as login/register just bold -->
<h2>Continue Your Yearbook</h2>
</div>
<div class="ach" align="center">
<ul>
<li>About</li>
<li>Create</li>
<li>How To</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Creating a Yearbook is Easy
<br><br>
Simply Choose Your Options Below.
</h1>
</div>
<div class="circlesT" style="background-color:#fff;">
<div class="a1">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/>
</div>
<div class="a1">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/>
</div>
<div class="a1">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/>
</div>
<div class="a1">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/>
</div>
</div>
</div>
<div class="bg">
<div class="ChooseSize" align="center">
<div class="ChooseSizeA2">
<h1 align="center">1. Choose a Size</h1>
</div>
</div>
<div class="picksize" align="center">
<div class="sizepics" align="center">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/8x6.gif" alt="" width="30%" height="30%">
</div>
<div class="sizepics" align="center">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/11x8.gif" alt="" width="30%" height="30%">
</div>
<div class="sizepics" align="center">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/8x8.gif" alt="" width="30%" height="30%">
</div>
</div>
<div class="fillera"><div class="filler"></div></div>
</div>
</body>
</html>

Answer 1

That's because of this :
/* med res or ipad */
#media only screen and (min-width: 481px) {
Your media query just use min-width. So every screen with a higher resolution will take CSS rules in it too. Add a max-width rule to it :
/* med res or ipad */
#media only screen and (min-width: 481px) and (max-width: 1023px) {

Answer 2

There's too much css in your example to go through, but perhaps you haven't properly thought through the css for the desktop, as it will be taking the ipad styles as well, considering it too is over 481px.
Try
#media only screen and (min-width: 481px) and (max-width: 1023px)