Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Code Pack
Code Pack
1,978 Points

Issue 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

geoffrey
geoffrey
28,736 Points

Could 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.

Code Pack
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
Code Pack
1,978 Points

Hi 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
Ken Alger
Treehouse Teacher

Fixed the code to display the entire document.

Hi!

Could you solve the problem? I have the same behaviour in a current project.

2 Answers

geoffrey
geoffrey
28,736 Points

Hi 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
Code Pack
1,978 Points

Hi Geoffrey,

It works fine with Mozilla but the problem is with chrome. thanks for your effort

geoffrey
geoffrey
28,736 Points

Ok, 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...