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 trialSebastian Haberl
Courses Plus Student 558 Pointshow to create a breakpoint
how to crate breakpoint
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;
}
@media screen (min-width: 480px) {
body {
background: navy
}
3 Answers
Simon Sørensen
17,304 PointsI'll just asume you mean a "Media Query Breakpoint". In that case, you have one in the bottom of your stylesheet, and it looks like this:
@media screen (min-width: 480px) {
body {
background: navy
}
}
To read more, I suggest visiting Mozilla Developer Network, as everything is clear, easy to understand and always up to date. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Happy coding :D
edeharrison
Full Stack JavaScript Techdegree Student 11,127 PointsHi Sebastian,
It's nearly right, you're just missing a few things. It should be -
@media screen and (min-width: 480px) {
body {
background: navy;
}
(the 'and' and the semi-colon after 'navy')
Hope that helps,
Ede
Simon Sørensen
17,304 PointsNo, you're wrong. You're both missing a bracket at the end of your code, and the 'screen' & 'and' is redundant.
edeharrison
Full Stack JavaScript Techdegree Student 11,127 PointsHi Simon,
OK! Just tried his code and then the same code with my additions and it did the trick in this case. I guess the bracket at the end of the code doesn't have the opportunity to mess anything up as there is no code following it.
All the best,
Ede
Simon Sørensen
17,304 PointsHi Eden,
In this case you're right. And you should actually put 'screen' in the query, unless you want responsive print also. That would be cool!! But remember, even if it works without the bracket, it's important to include it. In browsers CSS and HTML doesn't error the same way JS or any back-end script does, so it's best practice to include it.
Best regards, Simon.
Sebastian Haberl
Courses Plus Student 558 Pointsit diesn´t accept my answer
Ryan Field
Courses Plus Student 21,242 PointsJust to be clear, if you're going to include screen
in your media query, you need the and
. Either of these are okay:
@media screen and (min-width: 481px) {
body {
background: navy;
}
}
@media (min-width: 481px) {
body {
background: navy;
}
}
but this is not:
@media screen (min-width: 481px) {
body {
background: navy;
}
}
edeharrison
Full Stack JavaScript Techdegree Student 11,127 PointsHi Sebastian,
It's a shame that didn't work. Perhaps you could post the question? I'm sure it's something straightforward :)
Ede
PAVLOS KOKOZIDIS
4,342 PointsUsually to create a breakpoint, you need to make 2-3 seperate css files, as many as your media queries. From there, you can follow like this: <code> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" media="(min-width:480px)" href="css/media-query-480.css"></code>
Simon Sørensen
17,304 PointsNo no no, that's insanely bad practice! You should and can store all of your media queries in ONE css file!!
Sebastian Haberl
Courses Plus Student 558 PointsSebastian Haberl
Courses Plus Student 558 PointsOk, but it doesn´t acccept this answer...
Sebastian Haberl
Courses Plus Student 558 PointsSebastian Haberl
Courses Plus Student 558 PointsOk, but it doesn´t acccept this answer...
Simon Sørensen
17,304 PointsSimon Sørensen
17,304 PointsFollow Ede, she's right ;D