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
Darren Healy
Front End Web Development Techdegree Student 23,565 PointsHelp 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 & 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>© 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
21,956 PointsYou'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
Front End Web Development Techdegree Student 23,565 PointsHi 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
21,956 PointsSince 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.
Darren Healy
Front End Web Development Techdegree Student 23,565 PointsThat was it! Too much use of ID's rather than classes, thanks Adam!