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

Posted by Kevin Bonner
Kevin Bonner
2,302 Points

I don't have the file responsive.css to complete this challenge. How do I complete the challenge without it?

Not sure if this is a bug or not but I can't complete the challenge without the responsive style sheet.

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;
}
Mark Trevathan
Mark Trevathan
8,153 Points
Mark Trevathan
Mark Trevathan
8,153 Points

I don't see a media query in your code, have you tried this?

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

Depending on the challenge and which track you are on you might have to take out the "screen and" property

Kevin Bonner
Kevin Bonner
2,302 Points

Yeah, after resetting the code and pasting it back in a couple times it actually went through. Still not sure what the problem was. Thanks for your help!

3 Answers

Marcelo Pinto
Marcelo Pinto
10,198 Points
Marcelo Pinto
Marcelo Pinto
10,198 Points

Hi Kevin,

I have tried your challenge and you don't need the "responsive.css" file to complete it. Like Mark Trevathan wrote before, you just need to write the Media Queries at the bottom of the style sheet. I have completed it by using the following CSS rules:

/** Step 1 **/ @media (min-width: 480px) { h1 { font-size: 2.5em; } }

/** Step 2 **/ @media (min-width: 660px) { h2 { font-size: 1.75em; } }

Please tell me if you made it through and, most important, if you understood it.

Kevin Bonner
Kevin Bonner
2,302 Points
Kevin Bonner
Kevin Bonner
2,302 Points

Hey Marco, yeah I made it through and understand it. I'm wondering if I used the wrong type of bracket somewhere in the code. I kept pasting the same media quires in and resting the editor a couple times and it eventually excepted the code. Maybe there was a period or wrong bracket hiding somewhere in my code that I fixed without noticing. The editor for the challenges is kind of difficult to read on my monitor.

Marcelo Pinto
Marcelo Pinto
10,198 Points
Marcelo Pinto
Marcelo Pinto
10,198 Points

Glad to know it was a typing mistake, then. Anyway, thanks for your reply.

Kevin Lawler
seal-mask
.a{fill-rule:evenodd;}techdegree
Kevin Lawler
Full Stack JavaScript Techdegree Student 5,929 Points
Kevin Lawler
.a{fill-rule:evenodd;}techdegree
Kevin Lawler
Full Stack JavaScript Techdegree Student 5,929 Points

Glad it worked out Kevin!

Sometimes you solve problems without realizing it!

Everything gets to be habit and "instinct" soon enough.

Keep going, and best wishes!