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

Posted by Radu Ioan Stochita
Radu Ioan Stochita
3,558 Points

My header is broken - responsive design

Hello, Treehouse members!

So, after finishing my first course I've decided to create a website to see how much I've learned, but I got into a problem. My header is not responsive, when I use the float on the logo and then on the nav it goes crazy. Please, can you help me?

The source code: https://mega.co.nz/#F!PhUE2QCZ!Q82LncjA5_Al-50Zfn25TA

I hope that you can help me. Thank you!

1 Answer

Omar Emara
Omar Emara
18,249 Points
Omar Emara
Omar Emara
18,249 Points

Hi Radu, What was messing up your layout is that you needed to add a css rule of display: inline-block to the header element, to make the child elements display side by side.

I also recommend you to take a look on float and clear css properties.

Here is your new css.main

/* ---------------
GENERAL
-----------------*/

body {
    font-family: "Open Sans", sans-serif;
    background-color: #F2EBBF;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    margin-top: 0px;
    padding: 0 5%;

    margin-top:100px;
}

h1 {
    font-size: 2em;
    padding: 0;
    margin: 0;
}

h2 {
    font-size: 1em;
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
}




/* ---------------
HEADER
-----------------*/

header {
    width: 100%;
    background-color: #8CBEB2;
    display:inline-block;
    padding-bottom:20px;
}

header #logo {
    text-align: center;
    padding: 25px 0 0;

}

header #logo a {
    color: white;
    font-weight: bold;
}




/* ---------------
NAVIGATION
-----------------*/

nav {
    margin-top: 25px;
    background-color: #72BEB2;

}

nav ul {
    list-style: none;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;

}

nav ul li{
    display: block;
    padding: 10px 0;
}

nav ul li:hover {
    background-color: #4DBEB2;
}

nav ul li.selected {
    background-color: #4DBEB2;
}

nav a {
    font-weight: 400;
    color: white;
}

/* ---------------
FOOTER
-----------------*/

footer {
    padding: 0;
    margin: 0;
    text-align: center;
    clear: both;
}

#social {
    margin: 0;
    padding: 50px 0 0;
    width: 100%;
}

#social li {

    display: inline-block;
}

#social li a img {
    width: 30px;
    height: 30px;
}

footer p {
    margin: 0;
    padding: 0;
}

/* ---------------
PAGE: Portfolio;
-----------------*/

    /* ---------------
    IMAGE GALLERY
    -----------------*/

    #image-gallery {
        margin: 0;
        padding: 0;
    }

    #image-gallery li {
        float: left;
        width: 90%;
        margin: 0 5%;
        background-color: #F3B562;
        padding: 0;
        margin-bottom: 50px;
    }

    #image-gallery li p {
        padding: 5%;
        margin: 0;
        color: #5C4B51;
    }





/* ---------------
PAGE: About;
-----------------*/

section #profile-picture {
    display: block;
    max-width: 200px;
    height: 200px;
    border-radius: 100%; 
    margin: 0 auto;
    margin-bottom: 50px;
}




/* ---------------
PAGE: Contact;
-----------------*/


    /* ---------------
    GENERAL INFO
    -----------------*/

    #general-info p {
        font-size: 0.875em;
    }


    /* ---------------
    CONTACT
    -----------------*/

    #contact ul {
        padding: 0;
        margin: 12px 0 0;
    }

    #contact a {
        color: #F06060;
        background-repeat: no-repeat;
        background-size: 20px 20px;
        display: block;
        padding: 0 0 0 30px;
    }

    #contact .facebook a {
        background-image: url("../img/facebook-contact.png");
    }

    #contact .mail a {
        background-image: url("../img/mail-contact.png");
    }
Radu Ioan Stochita
Radu Ioan Stochita
3,558 Points

Thank you! You truly deserve a cookie!