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

This challenge is asking me did I change the font size to 2.5em for devices larger than 480px.

Do I need to place my code at the bottom of the page or does it matter?

css/main.css
a {
  text-decoration: none;
}

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

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

4 Answers

Michael Afanasiev
PLUS
Michael Afanasiev
Courses Plus Student 15,596 Points

Hi Wayne,

Media queries belong at the bottom of your CSS, this should fix your code. :) Hope this helps!

You have to write it at the bottom.

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

Hi. I almost done with this HTML/CSS course. Where can I go to practice? What is the next step from here? What software are you using to create websites?

Michael Afanasiev
PLUS
Michael Afanasiev
Courses Plus Student 15,596 Points

Hi Wayne,

Well done on completing most of the HTML/CSS! Where to practice? that's easy, you could practice by building your own website using what you learned right here on Treehouse using the workspaces.

If you feel like exploring different tools, I recommend you check out:

  1. Atom (Created by Git developers!) - It's the one I use most, and my favourite! - Free!
  2. Brackets (Made by Adobe) - Free!
  3. Sublime (One of the most popular text editors out there, and for a good reason) - Free, for evaluation.

It's hard to tell what to do next without knowing what goal you are trying to achieve but I can always recommend to follow the Front End Development track. :)

Feel free to explore the Treehouse Library for more HTML, CSS content and more. There's so much to learn!

I hope I answered your question a little bit!

Thank you. That is some good information. I have been learning UI/UX design. I am learning how to use Adobe Fireworks now. Like you said, there is so much to learn. With me its just a matter of focus. I try to be a jack of all trades sometimes. I just need to focus on a couple of things at a time or just decide what I want to focus on.

Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,596 Points

Nothing wrong with being jack of all trades but make sure you make it one step at a time. :)