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

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

Carlos Jimenez
PLUS
Carlos Jimenez
Courses Plus Student 4,242 Points
Posted by Carlos Jimenez
Carlos Jimenez
Courses Plus Student 4,242 Points

Media queries I have been trying to a write a breakpoint for 480px, and trying to insert the "font-size: 2.5em;" no help

In the challenge I have been attempting to write a break point using "@media screen and (min-width: 480px" {font-size: 2.5em;} The answer Bummer! keeps asking if I changed the breakpoint to 480px before h1 font-size to 2.5em. I have been trying every combination and watching the the 3 videos numerous time and don't see the combination to use,, Plz Help!!! Regards, Dazed and confused!!!

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 and (min-width: 480px) {
  font-size:2.5em
}

3 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hey Carlos,

You're missing the opening and closing curly braces to enclose the CSS rule that is inside of the curly braces of the media query. There should be one set for the query, and then just like a normal CSS rule, another set for the rule. You also have not selected the <h1> tag that the challenge wants styled.

Below is the corrected code for your reference. I hope it makes sense. Remember that CSS rules syntax doesn't change just because you have it inside of a media query. You can also have multiple rules inside one query.

@media screen and (min-width: 480px) {
  h1 {
    font-size:2.5em
  }
}

Keep Coding! :) :dizzy:

jitendra prajapati
jitendra prajapati
606 Points

i tryed this but not working

Carlos Jimenez
PLUS
Carlos Jimenez
Courses Plus Student 4,242 Points
Carlos Jimenez
Carlos Jimenez
Courses Plus Student 4,242 Points

Hello Jason, Thx for your response to my question. Eventually the code worked but found that applying the code as you show didn't work for me previously. I tried many combinations before putting it in the way you show which worked. Using the same syntax for the next question in the challenge with just changing the values to 660px again would not take. I believe there's a bug that is preventing the code from being written and accepting to the challenge. Don't get me wrong I'm by no means an expert, just that I was testing many methods of inputting the code with the same results. Since then I was able to define the code to both questions through google and there are is a difference with with syntax but it worked.

Katharine Cooney
Katharine Cooney
4,612 Points
Katharine Cooney
Katharine Cooney
4,612 Points

Hi!

I was having the same problem. I knew the code I was typing was correct, but it just wasn't being accepted. I was writing the code at the top of the CSS file, and then I decided to write the same exact code at the bottom of the file instead and it worked! I don't know if it is best practice to write media queries at the bottom of the CSS file if you're not making a separate responsive.css file, but this is what worked for me!

Carlos Jimenez
Carlos Jimenez
Courses Plus Student 4,242 Points
Carlos Jimenez
Carlos Jimenez
Courses Plus Student 4,242 Points

Hi Katharine, Thanks for you reply. I did get it figured out after some time and help from Jason Anders. I had left the braces off in question, but the problem actually was related to spacing... Hope your doing well with the Tracks.