Could you tell me, where is the problem?

Question

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

css/main.css

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

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

Answer 1 · 2016-06-02T08:21:17Z

June 2, 2016 8:21am

It looks like you had task 1 of 2 complete, but put the code at the top. This was a trick question to get you to think about the cascading nature of css. You added the media query at the top, but below it is another h1, and for any screen over 480px wide, it would first read yours, and then read the one below yours and use that font-size. For this reason, you should place any generic styling at the top, and then more specific styling at the bottom of the page (i.e. The order should be no media queries, larger screen sizes, medium screen sizes, and finally small screen sizes.)

Here is the code I used and placed at the bottom.

/*
This is the code that I added for task 1
*/

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

/*
This is the code that I added for task 2
*/

@media screen and (min-width: 660px){
  h2 {font-size: 1.75em ; }
}

Welcome to the Treehouse Community

Looking to learn something new?

Bade Unite

Bade Unite

Could you tell me, where is the problem?

1 Answer

Philip Gales

Philip Gales