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 Wayne Lee
Wayne Lee
4,781 Points

How to create responsive.css for challenge when main.css is shown.

The code challenge shows main.css but the video says to make a new responsive.css with media queries, so that the coding is not in main.css and the html files need a line after the main.css reference to refer to the responsive.css. What is the procedure for purposes of the code challenge?

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;
}

1 Answer

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

Hey Wayne,

You don't need to make separate files for the responsive part (the media queries) of CSS.

The challenge just wants you to add the media queries with the asked for rules. You do this right in the file that is provided. Most time, unless the project is rather large, you will not use a separate file for the responsive rules.

So, to do the challenge, just add the media queries and rules into the main.css file provided. Make sure they are added at the end of the file, as adding media queries at the top will often result in unwanted effects on your site (and an error in the code challenges).

Hope this helps. :dizzy: