Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Code Pack
1,978 PointsIssue with Media Queries - Need to refresh page again and again for changes
Hi,
I'm creating a responsive page with some Media Queries . I have added the view port link tag as well , but the problem is when i re-sizing my browser it ain't showing the results I have made , for that I need to refresh my page every time. Kindly let me know how to fix this. Thanks in advance
Code Pack
1,978 Points<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="view-port" content="width=device-width, intial-scale=1, maximum-scale=1">
<title>Header and Menu Practice</title>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<style>
*{
margin:0 auto;
}
body {
background: #f4f4f4;
font-family: 'Roboto Slab', serif;
}
header {
position: fixed;
overflow: hidden;
z-index: 2;
background: white;
width: 100%;
padding: 20px 0;
top: 0;
box-shadow: 0px 2px 4px rgba(0,0,0,.2);
transition: .3s linear;
}
.row {
display: table;
float: left;
width: 100%;
}
.center {
display: inline-block;
}
.logo {
width: 40px;
opacity: .5;
float: left;
transition: .3s linear;
margin-left: 30px;
}
.title {
display: inline-block;
}
.title a {
font-size: 1em;
text-decoration: none;
color: grey;
margin-left: 10px;
vertical-align: center;
}
.title span {
margin-left: 1em;
font-size: .6em;
font-weight: normal;
}
.show-menu {
text-decoration: none;
text-align: center;
color: #000;
display: none;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked ~ .nav {
display: block;
}
.nav {
float: right;
}
.nav ul {
list-style-type: none;
}
ul {
padding: 0;
}
.nav li {
display: inline-block;
}
.nav li a {
text-decoration: none;
color: black;
padding:5px 15px;
line-height: 3.5;
}
/****************
--Media Queries--
****************/
@media only screen and (max-width:740px) {
.center {
display: block;
margin: auto;
text-align: center;
}
header {
position: absolute;
}
ul {
position: static;
display: none;
}
li {
margin-bottom: 1px solid black;
text-align: center;
}
ul li, li a {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
line-height: 1.5;
}
li a:hover, a:active {
border-bottom: 1px solid black;
}
.show-menu {
width: 20%;
text-align: center;
display: block;
margin-top: 10px;
padding: 5px 10px;
border-radius: 5px;
background-color: black;
color: white;
}
.show-menu:hover {
color: white;
border: 1px solid white;
}
.title span {
display: block;
}
}
@media only screen and (min-width:740px) {
.center {
display: inline-block;
}
}
@media only screen and (max-width:990px) {
.title span {
display: block;
margin-left: 9.2px;
}
}
</style>
</head>
<body>
<header class="fixed">
<div class="row">
<div class="center">
<a href="#" class="logo"><img src="logo.png" alt="logo" width="40px" height="50px"></a>
<h1 class="title"><a href="#">Aram Vishnu</a><span>Illustrator and Designer</span></h1>
</div>
<label for="show-menu" class="show-menu">Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Learn</a></li>
<li><a href="#">Teach</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</header>
</body>
</html>
Code Pack
1,978 PointsHi Geoffrey,
Thanks for your quick response, Please go through the link to download the file, And i'm unable to center the image as well while resizing . kindly let me know how to fix this, (https://drive.google.com/file/d/0B4LXJiDCTUnAYTN0eC02SFZFWm8/view?usp=sharing)
Thanks in advance.
Ken Alger
Treehouse TeacherFixed the code to display the entire document.
elkeschiffer
2,296 PointsHi!
Could you solve the problem? I have the same behaviour in a current project.
2 Answers
geoffrey
28,736 PointsHi Code Pack, I downloaded your project, and I 've just looked at it. On my side, your page has the behaviour It should have with the media queries you put. If I resize the window, styles are applied, I don't need to refresh at all my browser.
I've checked under Firefox & Chromium, It just works fine... I as well added some styles and It works...
Have you tried with another browser ?
Code Pack
1,978 PointsHi Geoffrey,
It works fine with Mozilla but the problem is with chrome. thanks for your effort
geoffrey
28,736 PointsOk, I use Linux Mint, so what I have is Chromium and not Chrome, and It works perfectly. I can't really check with chrome. It might sound stupid but check if your browser is up to date, I saw nothing wrong with what coded...
geoffrey
28,736 Pointsgeoffrey
28,736 PointsCould you share your code, It would be easier for us to help you :) Because without it, I can't help much on my side. At least I have no idea at the moment.