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 trialRhonda Bradley
2,010 PointsWhere is responsive.css? Video didn't say how/where to add this code using main.css.
RE: code challenge for creating breakpoints.
We just learned how to add breakpoints in the responsive.css page. But the challenge wants me to add it in main.css. Am I missing something really obvious?
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
}
#logo {
text-align: center;
margin: 0;
}
h1, h2 {
color: #fff;
}
nav a {
color: #fff;
}
nav a:hover {
color: #32673f;
}
h1 {
font-family: ‘Changa One’, sans-serif;
font-size: 1.75em;
font-weight: normal;
}
img {
max-width: 100%;
}
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
.profile-photo {
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
2 Answers
Sam Baines
4,315 PointsHi Rhonda - for the challenge you have to write your css breakpoints in the file main.css to complete the challenge. In a real world project it doesn't actually matter where you put your breakpoints either - could be in your theme.css file or in a separate responsive.css file - it comes down to personal preference. Just make sure you link to files correctly in the head section of your html code. Hope this helps.
Rhonda Bradley
2,010 PointsSam,
Your answer helps a lot. However, I'm baffled as to where in css.main I'd enter the breakpoint and give it a navy background. I'm going to take some guesses and see if it works out. Thanks very much for the info.
Rhonda Bradley
2,010 Pointsupdate; I just added it to the bottom of the page, and it worked. Thanks again for filling me in on that.
Sam Baines
4,315 PointsHi Rhonda - glad I could help, it makes sense for you to put it further down your css file due to the nature and the way that the cascade works.