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

CSS How to Make a Website Responsive Web Design and Testing Write CSS Media Queries

Posted by Sebastian Haberl
Sebastian Haberl
Courses Plus Student 558 Points

how to create a breakpoint

how to crate breakpoint

css/main.css 
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
Simon Sørensen
17,304 Points
Simon Sørensen
Simon Sørensen
17,304 Points

I'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

Sebastian Haberl
Sebastian Haberl
Courses Plus Student 558 Points

Ok, but it doesn´t acccept this answer...

Sebastian Haberl
Sebastian Haberl
Courses Plus Student 558 Points

Ok, but it doesn´t acccept this answer...

edeharrison
seal-mask
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points
edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hi 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
Simon Sørensen
17,304 Points
Simon Sørensen
Simon Sørensen
17,304 Points

No, you're wrong. You're both missing a bracket at the end of your code, and the 'screen' & 'and' is redundant.

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hi 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
Simon Sørensen
17,304 Points
Simon Sørensen
Simon Sørensen
17,304 Points

Hi 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
Sebastian Haberl
Courses Plus Student 558 Points

it diesn´t accept my answer

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Just 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
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hi 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
PAVLOS KOKOZIDIS
4,342 Points
PAVLOS KOKOZIDIS
PAVLOS KOKOZIDIS
4,342 Points

Usually 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
Simon Sørensen
17,304 Points
Simon Sørensen
Simon Sørensen
17,304 Points

No no no, that's insanely bad practice! You should and can store all of your media queries in ONE css file!!