Issues with Media Queries
Question
As the title says I seem to be encountering issues with my css and I cant for the life of me figure out why. Everything looks correct to me, so I decided to bring it to stack overflow to get some help. Here is my code below
header {
height: 70px;
width: 100%;
background: url("../img/header.svg");
background-size: cover; }
header #logo {
float: left;
display: inline-block;
margin: 10px 0 0 50px;
width: 112px;
height: 50%; }
header nav {
float: right;
margin-right: 50px;
display: inline-block;
height: 70px;
width: 435px; }
header nav a#pull {
display: none; }
header nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 70px; }
header nav ul li {
line-height: 70px;
margin: 0 15px;
display: inline;
list-style: none; }
header nav ul li a {
text-decoration: none;
text-transform: capitalize;
font-family: Helvetica;
font-size: 20px;
color: #ffffff;
line-height: 35px; }
@media (max-width: 584px) {
header {
height: 200px; }
header #logo {
display: block; }
header nav {
width: 100%;
height: 80px;
margin: auto; }
header nav ul {
width: 100%;
display: block;
height: auto;
margin: auto; }
}
and this is my html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/style.css"/>
<title></title>
</head>
<body>
<Header>
<img id="logo" src="img/caseywoelfle.svg" alt="Logo"/>
<nav class="clearfix">
<ul class="clearfix">
<li><a href="index.html">home</a></li>
<li><a href="about.html">about me</a></li>
<li><a href="portfolio.html">portfolio</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
</Header>
<div id="homepage">
<div id="banner">
<img id="bannerLogo" src="img/caseywoelfle.svg" alt=""/>
<p id="wd">web development</p>
<a id="fomLink" style="display:block" href="about.html">
<div id="fom">
<p>find out more</p>
</div>
</a>
</div>
<footer>
</footer>
</body>
</html>
The main issue I am facing is my media query is not happen at the amount of pixels I specified. On some browsers it happens before, and on others it happens to late after.
2 answers
solution1
2 ACCPTED 2014-12-29 12:11:36
solution2
0 2014-12-29 12:16:08
You need to make sure that you are providing the mediatype as part of the query. This describes the selected output which could be screen or print for instance.
So in your code you need to add the following: @media screen and (max-width: 584px) {
I created a fiddle here: http://jsfiddle.net/2rgxfmak/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.