how to make the media query

Question

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) {

}

Answer 1 · 2015-03-31T13:51:30Z

March 31, 2015 1:51pm

Hi Sebastian,

I guess this is a carry on from the question you posted earlier.

Inside the brackets you have written, -

@media screen and (min-width: 480px) {

}

you need to write all the code you want to take effect when the browser has a width above your defined width (480px in your case).

You write it just like the CSS out of these brackets. For example -

@media screen and (min-width: 480px) {
   #gallery {
      background: black;
   }
}

would change the gallery's background to black.

Hope that helps,

Ede

Welcome to the Treehouse Community

Looking to learn something new?

Sebastian Haberl

Sebastian Haberl

how to make the media query

1 Answer

edeharrison

edeharrison