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

HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

shane smales
shane smales
1,933 Points
Posted by shane smales
shane smales
1,933 Points

resizing the logo and nav using a media query

hi,

my nag doesn't seem to want to resize and go into the header once the screen resolution is bigger than 660px. I aren't sure if this is to do with something in the HTML or CSS.

@charset "UTF-8";

/if the width of the screen is any bigger than 480px apply these styles/ @media screen and (min-width: 480px){

/*********************************
        TWO COLUMN LAYOUT
*********************************/
#primary{
    width:50%;
    float:left;
}


#secondary{
    width:40%;
    float:right;
}


/*********************************
calculation for portfolio layout
3*5 = 15%
100% - 15% = 85%
85% / 3 = 28.333333333
*********************************/

/*********************************
        PAGE: PORTFOLIO
*********************************/

#gallery li{
    width: 28.3333%;        
}

#gallery li:nth-child(4n){
    clear:left;
}


/*********************************
        PAGE: ABOUT
*********************************/

.profile-photo{
    float:left;
    /*top, right, left, bottom*/
    margin:0 5% 80px 0;
}

}

/if the width of the screen is any bigger than 660px apply these styles/ @media screen and (min-width: 660px){

/*********************************
            HEADER
*********************************/

nav{
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;
}

#logo{
    float:left;
    margin-left:5%;
    text-align:left;
    width:45%;
}

}

5 Answers

Amy Burrows
Amy Burrows
11,362 Points
Amy Burrows
Amy Burrows
11,362 Points

Hi Shane, Your styling looks the way it should. Maybe it's something in your markup, like an inline image size? If you're still having problems could you please post your HTML?

Michael Caveney
Michael Caveney
50,144 Points
Michael Caveney
Michael Caveney
50,144 Points

Take another look at your formatting? Your code is showing up partially in the workspace, and partially as text, so something's definitely up there.

Amy Burrows
Amy Burrows
11,362 Points
Amy Burrows
Amy Burrows
11,362 Points

Another thought. If you have a border on either of the two elements in another stylesheet, you would need to set your box-sizing to border-box.

shane smales
shane smales
1,933 Points
shane smales
shane smales
1,933 Points

hey,

I did the tasks in a Text editor and not the workspaces, so thats why it looks so odd because i have just copied and pasted into the comments.

here is my html:

<!DOCTYPE html> <html>

<head>

    <meta charset="utf-8">
    <title>Shane Smales | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">

</head>

<body>

        <header>
        <a href="index.html" id="logo">
            <h1>Shane Smales</h1>
            <h2>Designer</h2>
        </a>

        <nav>

            <ul>
                <li><a href="index.html">Portfolio</a></li>
                <li><a href="about.html" class="selected">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

    <div id="wrapper">

        <section>
            <img src="img/nick.jpg" alt="Photograph of Nick Petit" class="profile-photo">
            <h3>About</h3>

            <p>Hi, Im shane smales and this website is a tut i followed on Team Tree house. I have been following this tutorial because it will give me some foundation knowledge in order to build my own responcive portfolio site.</p>

            <p>If you would like to follow this tut follow Nick Petit <a href="http://twitter.com/nickrp">@nickrp</a></p>

        </section>

        <footer>
            <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
            <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
            <p>&copy; 2014 Shane Smales</p>
        </footer>

    </div>
</body>

</html>

shane smales
shane smales
1,933 Points
shane smales
shane smales
1,933 Points

hey guys,

Thanks for all your help but i have managed to solve the problem.

I simply hadn't included float: left; into my header on the main.css page, I do appreciate all the help it just shows what a great bunch of people use team treehouse.