madnhate
07-22-2012, 06:16 AM
I've been trying to use media queries to make a web responsive website that is fluid. The problem is though is for some reason the style is being overridden even though the page is not being resized. The style is only supposed to change when the browser or screen is smaller but it's overridden the css for default, larger screen sizes. Is this because I have the media queries in one file and I'm supposed to have each screen size in a different css file?
Original css:
html, body {
margin:0; padding:0;
height:100%;
}
body
{
background:#06132d url('bg.png') no-repeat center top;
}
a {outline: none;}
img, img a{outline:none; border:0 none;}
#wrapper {margin: 0 auto; width:800px; min-height: 100%; margin-top:20px; margin-bottom:-80px;}
.logo {display:inline; float:left; margin-right:10px;}
#header {width:800px; height:150px;}
#header ul {margin:0;
padding:0; float:right; list-style-type:none; margin-top:75px; }
#header ul li {list-style-type: none; display:inline; }
#header ul li a
{
font:bold 16px arial, helvetica, sans-serif;
color:#FFFFFF;
background-color:#4AA02C;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
#header ul li a:link, #header ul li a:visited
{
font:bold 16px arial, helvetica, sans-serif;
color:#FFFFFF;
background-color:#4AA02C;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
#header ul li a:hover, #header ul li a:active
{
background-color:#6CC417;
}
#main{clear:both; font: 14px arial, helvetica, sans-serif; color:#fff; margin-top:20px; margin-bottom:40px; width:800px; padding-top:10px; padding-bottom: 80px; overflow:auto;}
h1{font: bold 17px arial, helvetica, sans-serif; color:#fff; text-transform:uppercase;}
#footer {/*clear:both; background:#306754; display: block; width:100%; border-top:1px #666 solid; height:100px;*/
position: relative;
margin-top: -80px; /* negative value of footer height */
height: 80px;
clear:both;
background:#0c1831;
border-top:1px #666 solid;
}
#footer-links {display: block; margin:0 auto; width:400px; float:right; }
#footer-links ul {display:block; }
#footer-links ul li {list-style-type: none; display:inline;}
#footer-links ul li a
{
font:bold 10px arial, helvetica, sans-serif;
color:#999;
text-align:center;
padding:6px;
text-decoration:underline;
text-transform:capitalize;
}
#footer-links ul li a:link, #footer-links ul li a:visited
{
font:bold 10px arial, helvetica, sans-serif;
color:#999;
text-align:center;
padding:6px;
text-decoration:underline;
text-transform:capitalize;
}
#footer-links ul li a:hover, #footer-links ul li a:active
{text-decoration:underline; color:#C0C0C0;}
#footer-copyright
{
display: block; margin:0 auto; width:400px; clear:both;
font:normal 10px arial, helvetica, sans-serif;
color:#ccc;
text-align:center;
padding:6px;
text-transform:capitalize;
}
.push {
height: 60px;
}
#slides{ }
.slides_container {
width:800px;
height:400px;
clear:both; border:10px solid rgba(255,255,255,0.5); box-shadow: 0 2px 4px .02px black;
}
.slides_container div {
width:800px;
height:400px;
display:block;
}
/* Pagination */
.pagination {
clear:both;
margin:20px auto 20px;
width:100px;
}
.pagination li {
float:left;
margin:0 1px;
list-style:none;
border-radius:6px;
width:12px;
height:12px;
}
.pagination li a {
display:block;
border-radius:6px;
width:12px;
height:0;
padding-top:12px;
background:#347C17;
float:left;
overflow:hidden;
}
.pagination li.current a {
background:#4AA02C;
}
/*Caption*/
.caption {
z-index:500;
position:absolute;
bottom:-400px;
left:0;
height:10px;
padding:5px 20px 0 20px;
background:#000;
background:rgba(0,0,0,.8);
width:780px;
font-size:1.3em;
line-height:1.33;
color:#fff;
/*border-top:1px solid #000;*/
text-shadow:none;
}
/* Social Media */
/*
#footer-social {display: block; margin:0 auto; width:400px; }
#footer-social ul {display:block; }
#footer-social ul li {list-style-type: none; display:inline;}
#footer-social ul li a
{
font:bold 10px arial, helvetica, sans-serif;
color:#999;
text-align:center;
padding:6px;
text-decoration:underline;
text-transform:capitalize;
}
#footer-social ul li a:link, #footer-social ul li a:visited
{
font:bold 10px arial, helvetica, sans-serif;
color:#999;
text-align:center;
padding:6px;
text-decoration:underline;
text-transform:capitalize;
}
#footer-social ul li a:hover, #footer-social ul li a:active
{text-decoration:underline; color:#C0C0C0;} */
#footer-social {display: block; margin:0 auto; width:200px; float:left;}
#footer-social ul {display:block; }
#footer-social ul li {list-style-type: none; display:block; float:left; width:30px;
height:30px;}
#footer-social ul li a
{
display:block;
}
.twitter {
display: block;
position: relative;
/*position: relative;
text-indent: -9999px;*/
background: url(social_media.png) no-repeat;
background-position: 0 -160px; width: 30px; height: 30px;
}
.twitter span {
display:block;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(social_media.png) no-repeat;
background-position: 0 -240px; width: 30px; height: 30px;
}
.facebook {
display: block;
position: relative;
/*position: relative;
text-indent: -9999px;*/
background: url(social_media.png) no-repeat;
background-position: 0 0; width: 30px; height: 30px;
}
.facebook span {
display: block;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(social_media.png) no-repeat;
background-position: 0 -80px; width: 30px; height: 30px;
}
#footer-wrapper{ margin: 0 auto; width: 600px;}
media Queries:
@media screen and (max-width: 980px) {
/*body {font-size:65%;}*/
#wrapper {
width: 75%;
}
#header {width:100%; }
#header ul { width:75%;}
#header ul li{width:10%;overflow:hidden; display:inline; margin: .01%;}
#header ul li a:link{font-size:.8em; padding:2%;}
#slides{
}
.slides_container {
clear:both;
max-width:100%;
height:auto;
border:10px solid rgba(255,255,255,0.5); box-shadow: 0 2px 4px .02px black;
overflow:hidden;
}
.slides_container div {
max-width:100%;
height:auto;
}
.slides_container div img {width:100%; display:block;}
/*
.caption {
z-index:500;
position:absolute;
bottom:-0;
left:0;
height:10%;
padding:5px 20px 0 20px;
background:#000;
background:rgba(0,0,0,.8);
width:100%;
font-size:1em;
line-height:1.33;
color:#fff;
/*border-top:1px solid #000;
text-shadow:none;
}*/
#main{
width: 100%;}
.pagination {width: 100px; margin-left:auto; margin-right:auto;}
}
#footer {
max-width: 100%; height: auto;
}
#footer-wrapper{ margin: 0 auto; width: 600px;}
}
@media screen and (max-width: 650px) {
#wrapper {
width: 75%;
}
#header {width:100%; position: static; }
#header ul { width:75%;}
#header ul li{width:10%;overflow:hidden; display:inline; margin: .01%;}
#header ul li a:link{font-size:.8em; padding:2%;}
#slides{
}
.slides_container {
clear:both;
max-width:100%;
height:auto;
border:10px solid rgba(255,255,255,0.5); box-shadow: 0 2px 4px .02px black;
overflow:hidden;
}
.slides_container div {
max-width:100%;
height:auto;
}
.slides_container div img {width:100%; display:block;}
/*
.caption {
z-index:500;
position:absolute;
bottom:-0;
left:0;
height:10%;
padding:5px 20px 0 20px;
background:#000;
background:rgba(0,0,0,.8);
width:100%;
font-size:1em;
line-height:1.33;
color:#fff;
/*border-top:1px solid #000;
text-shadow:none;
}*/
#main{
width: 100%;}
.pagination {width: 100px; margin-left:auto; margin-right:auto;}
}
#footer {
width: 100%; height: auto;
}
#footer-wrapper{ margin: 0 auto; width: 600px;}
#footer-wrapper ul{}
#footer-wrapper ul li{display:block;}
}
@media screen and (max-width: 480px) {
}
Original css:
html, body {
margin:0; padding:0;
height:100%;
}
body
{
background:#06132d url('bg.png') no-repeat center top;
}
a {outline: none;}
img, img a{outline:none; border:0 none;}
#wrapper {margin: 0 auto; width:800px; min-height: 100%; margin-top:20px; margin-bottom:-80px;}
.logo {display:inline; float:left; margin-right:10px;}
#header {width:800px; height:150px;}
#header ul {margin:0;
padding:0; float:right; list-style-type:none; margin-top:75px; }
#header ul li {list-style-type: none; display:inline; }
#header ul li a
{
font:bold 16px arial, helvetica, sans-serif;
color:#FFFFFF;
background-color:#4AA02C;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
#header ul li a:link, #header ul li a:visited
{
font:bold 16px arial, helvetica, sans-serif;
color:#FFFFFF;
background-color:#4AA02C;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
#header ul li a:hover, #header ul li a:active
{
background-color:#6CC417;
}
#main{clear:both; font: 14px arial, helvetica, sans-serif; color:#fff; margin-top:20px; margin-bottom:40px; width:800px; padding-top:10px; padding-bottom: 80px; overflow:auto;}
h1{font: bold 17px arial, helvetica, sans-serif; color:#fff; text-transform:uppercase;}
#footer {/*clear:both; background:#306754; display: block; width:100%; border-top:1px #666 solid; height:100px;*/
position: relative;
margin-top: -80px; /* negative value of footer height */
height: 80px;
clear:both;
background:#0c1831;
border-top:1px #666 solid;
}
#footer-links {display: block; margin:0 auto; width:400px; float:right; }
#footer-links ul {display:block; }
#footer-links ul li {list-style-type: none; display:inline;}
#footer-links ul li a
{
font:bold 10px arial, helvetica, sans-serif;
color:#999;
text-align:center;
padding:6px;
text-decoration:underline;
text-transform:capitalize;
}
#footer-links ul li a:link, #footer-links ul li a:visited
{
font:bold 10px arial, helvetica, sans-serif;
color:#999;
text-align:center;
padding:6px;
text-decoration:underline;
text-transform:capitalize;
}
#footer-links ul li a:hover, #footer-links ul li a:active
{text-decoration:underline; color:#C0C0C0;}
#footer-copyright
{
display: block; margin:0 auto; width:400px; clear:both;
font:normal 10px arial, helvetica, sans-serif;
color:#ccc;
text-align:center;
padding:6px;
text-transform:capitalize;
}
.push {
height: 60px;
}
#slides{ }
.slides_container {
width:800px;
height:400px;
clear:both; border:10px solid rgba(255,255,255,0.5); box-shadow: 0 2px 4px .02px black;
}
.slides_container div {
width:800px;
height:400px;
display:block;
}
/* Pagination */
.pagination {
clear:both;
margin:20px auto 20px;
width:100px;
}
.pagination li {
float:left;
margin:0 1px;
list-style:none;
border-radius:6px;
width:12px;
height:12px;
}
.pagination li a {
display:block;
border-radius:6px;
width:12px;
height:0;
padding-top:12px;
background:#347C17;
float:left;
overflow:hidden;
}
.pagination li.current a {
background:#4AA02C;
}
/*Caption*/
.caption {
z-index:500;
position:absolute;
bottom:-400px;
left:0;
height:10px;
padding:5px 20px 0 20px;
background:#000;
background:rgba(0,0,0,.8);
width:780px;
font-size:1.3em;
line-height:1.33;
color:#fff;
/*border-top:1px solid #000;*/
text-shadow:none;
}
/* Social Media */
/*
#footer-social {display: block; margin:0 auto; width:400px; }
#footer-social ul {display:block; }
#footer-social ul li {list-style-type: none; display:inline;}
#footer-social ul li a
{
font:bold 10px arial, helvetica, sans-serif;
color:#999;
text-align:center;
padding:6px;
text-decoration:underline;
text-transform:capitalize;
}
#footer-social ul li a:link, #footer-social ul li a:visited
{
font:bold 10px arial, helvetica, sans-serif;
color:#999;
text-align:center;
padding:6px;
text-decoration:underline;
text-transform:capitalize;
}
#footer-social ul li a:hover, #footer-social ul li a:active
{text-decoration:underline; color:#C0C0C0;} */
#footer-social {display: block; margin:0 auto; width:200px; float:left;}
#footer-social ul {display:block; }
#footer-social ul li {list-style-type: none; display:block; float:left; width:30px;
height:30px;}
#footer-social ul li a
{
display:block;
}
.twitter {
display: block;
position: relative;
/*position: relative;
text-indent: -9999px;*/
background: url(social_media.png) no-repeat;
background-position: 0 -160px; width: 30px; height: 30px;
}
.twitter span {
display:block;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(social_media.png) no-repeat;
background-position: 0 -240px; width: 30px; height: 30px;
}
.facebook {
display: block;
position: relative;
/*position: relative;
text-indent: -9999px;*/
background: url(social_media.png) no-repeat;
background-position: 0 0; width: 30px; height: 30px;
}
.facebook span {
display: block;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(social_media.png) no-repeat;
background-position: 0 -80px; width: 30px; height: 30px;
}
#footer-wrapper{ margin: 0 auto; width: 600px;}
media Queries:
@media screen and (max-width: 980px) {
/*body {font-size:65%;}*/
#wrapper {
width: 75%;
}
#header {width:100%; }
#header ul { width:75%;}
#header ul li{width:10%;overflow:hidden; display:inline; margin: .01%;}
#header ul li a:link{font-size:.8em; padding:2%;}
#slides{
}
.slides_container {
clear:both;
max-width:100%;
height:auto;
border:10px solid rgba(255,255,255,0.5); box-shadow: 0 2px 4px .02px black;
overflow:hidden;
}
.slides_container div {
max-width:100%;
height:auto;
}
.slides_container div img {width:100%; display:block;}
/*
.caption {
z-index:500;
position:absolute;
bottom:-0;
left:0;
height:10%;
padding:5px 20px 0 20px;
background:#000;
background:rgba(0,0,0,.8);
width:100%;
font-size:1em;
line-height:1.33;
color:#fff;
/*border-top:1px solid #000;
text-shadow:none;
}*/
#main{
width: 100%;}
.pagination {width: 100px; margin-left:auto; margin-right:auto;}
}
#footer {
max-width: 100%; height: auto;
}
#footer-wrapper{ margin: 0 auto; width: 600px;}
}
@media screen and (max-width: 650px) {
#wrapper {
width: 75%;
}
#header {width:100%; position: static; }
#header ul { width:75%;}
#header ul li{width:10%;overflow:hidden; display:inline; margin: .01%;}
#header ul li a:link{font-size:.8em; padding:2%;}
#slides{
}
.slides_container {
clear:both;
max-width:100%;
height:auto;
border:10px solid rgba(255,255,255,0.5); box-shadow: 0 2px 4px .02px black;
overflow:hidden;
}
.slides_container div {
max-width:100%;
height:auto;
}
.slides_container div img {width:100%; display:block;}
/*
.caption {
z-index:500;
position:absolute;
bottom:-0;
left:0;
height:10%;
padding:5px 20px 0 20px;
background:#000;
background:rgba(0,0,0,.8);
width:100%;
font-size:1em;
line-height:1.33;
color:#fff;
/*border-top:1px solid #000;
text-shadow:none;
}*/
#main{
width: 100%;}
.pagination {width: 100px; margin-left:auto; margin-right:auto;}
}
#footer {
width: 100%; height: auto;
}
#footer-wrapper{ margin: 0 auto; width: 600px;}
#footer-wrapper ul{}
#footer-wrapper ul li{display:block;}
}
@media screen and (max-width: 480px) {
}