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

Jyotika Narang
PRO
Jyotika Narang
Pro Student 3,110 Points

Create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the h1 font-size to 2.5em.

Create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the h1 font-size to 2.5em.

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;
}
Steven Parker
Steven Parker
172,335 Points

It doesn't look like you've written any code yet. Give it your best "good faith" try and then show your work if you still need some help.

Pawel Ellwart
Pawel Ellwart
11,680 Points

Hi Jyotika,

try the following code:

@media (min-width:480px) {

h1 {
font-size: 2.5em;
}

}
Steven Parker
Steven Parker
172,335 Points

:warning: Explicit answers without any explanation are strongly discouraged by Treehouse and may be redacted by staff or moderators

Use min-width on the media query selector...think of it as looking at a width of 480px and larger.