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.

General Discussion

Darren Healy
seal-mask
.a{fill-rule:evenodd;}techdegree
Darren Healy
Front End Web Development Techdegree Student 23,565 Points

Help Making Website Responsive

I am trying to ensure that my website is responsive on smaller devices. However I'm struggling a little with the necessary media queries and code. I am trying to make all my divs move to a single column layout in their correct order.

This is my code so far:

HTML:

 <!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>Darren Healy | Developer &amp; Entrepreneur</title>
        <link rel="stylesheet" type="text/css" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Serif' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="container">
            <div id="blurb">
                <h1>Hi, I'm Darren Healy.</h1>
                <p class="has-text">I am a budding coder; this is the first iteration of my very own website that I coded from scratch using some of my own wit and normalize.css. I'm the managing director of my own small marketing company specialising in digital marketing. I'm also an entrepreuer and plan to update the site with the projects I'm working on soon! New websites, apps, games and more have been floating around my brain for a while; it's time to start building!</p>
                </p>
            </div>
                <div id="mugshot">
                    <img src="img/darren.jpg" alt="A photograph of Darren Healy.">
                </div>
            <div id="contacts" class="has-text">
                <h2>Where to contact me:</h2>
                <ul>
                    <li id="email"><a href="mailto:darren@darrenhealy.com">Email me</a></li>
                    <li id="twitter"><a href="http://twitter.com/intent/tweet?screen_name=darrenhealy_" target="_blank">Tweet me</a></li>
                </ul>
            </div>
            <div id="project-links" class="has-text">
                <h2>Some projects I'm working on:</h2>
                <ul>
                    <li>a</li>
                    <li>b</li>
                    <li>cg</li>
                    <li>de</li>
                </ul>
            </div>
            <div id="footer" class="has-text">
            <p>&copy; 2014 Darren Healy.</p>
            </div>
        </div>
    </body>
</html>

CSS

/***********************************
GENERAL STYLING
************************************/

body {
    font-family: 'Droid Sans', sans-serif;
    background-color: #F7F8F3;
    color: #2E363F;
}

h1, h2, h3 {
    font-family: 'Droid Serif', serif;
    color: #2E363F;
}

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

}

h1 {
    font-size: 2em;
    line-height: 1.2em;
}

h2 {
    font-size: 1.5em;
    line-height: 1.2em;
}

.has-text {
    font-size: 1.2em;
    line-height: 1.5em;

}

img {
    max-width: 100%;
    border-radius: 100%;
    border: 5px solid #6ab47b;

}

#mugshot {
    float: left;
    width: 45%;
    margin: 2.5%;

}

#blurb {
    float: left;
    margin: 2.5%;
    width: 45%;

}

#contacts {
    float: left;
    width: 45%;
    margin: 2.5%;
}

#project-links {
    float: left;
    width: 45%;
    margin: 2.5%;
}

#footer {
    text-align: center;
}

#contacts ul {
    list-style: none;
}

#contacts a {
    text-decoration: none;
}

#contacts li a {
    list-style: none;
    min-height: 30px;
    display: block;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    padding: 0 0 0 30px;
}

#contacts li#twitter a {
    background-image: url('../img/twitter.png');
}

#contacts li#email a {
    background-image: url('../img/mail.png');
}



/***********************************
COLORS
************************************/

a {
  color: #599a68
}

/***********************************

************************************/



/***********************************

************************************/



/***********************************

************************************/



/***********************************
MEDIA QUERIES
************************************/

@media only screen and (max-device-width: 480px) {


}

Oh mighty Guil Hernandez can you show me the way?!

4 Answers

Adam Moore
Adam Moore
21,956 Points

You'll need to set specific widths for each of your sections as the device screen size changes. So, for the smallest device, you'll want their width to take up more space than would allow for more than one of your divs on each line. Whether this means that you set your width: 70%; margin: 15% or width: 95%; margin: 2.5% or whatever else you set, as long as it doesn't allow for more than one div on the same line. Then, with your media query specifying the point at which you want them to be at least two on a line, you can set the width: 45%; margin: 2.5% like you have it or any other way. I suggest fiddling with it and seeing how it works, both in general and what you might like to organize it the best for your purposes.

Also, if you are wanting to have all of those divs to have basically the same width and margins, you might consider using a class for them, so you only have to set the width and margin once per media query.

Darren Healy
seal-mask
.a{fill-rule:evenodd;}techdegree
Darren Healy
Front End Web Development Techdegree Student 23,565 Points

Hi Adam,

I applied a class of narrow to all the divs because they will have the same width and margins for now:

@media screen and (max-width: 480px) {

    .narrow {
        width: 70%;
        margin: 15%;
    }

}

After trying that it doesn't work. I also tried the width and margin at 90% and 2.5% respectively. Thoughts?

Adam Moore
Adam Moore
21,956 Points

Since you are using an ID overall and a class in the media query, the ID takes precedence over class, so the .narrow is pushed to the side for the more specific ID details. Therefore, if you change that, it should work.