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

agustin punongbayan
agustin punongbayan
530 Points
Posted by agustin punongbayan
agustin punongbayan
530 Points

html / breakpt - where to set h1 to 2.5em along with the min width of 480px? My code seems to be incorrect, pls help.

My code under css.main file is below...

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

I also tried adding h1 before font-size but still showing incorrect.. { @main screen and (min-width: 480px h1 font-size: 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;
}
@media screen and (min-width: 480px font-size: 2.5em;){
  body { background: grey;
  }
}

2 Answers

edeharrison
seal-mask
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points
edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hi Agustin,

There are a few errors in the construction of your code. For example:

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

should be something like:

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

This:

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


}

tells the page that when the user is using a screen and when the browser width is at least 480px, apply these styles:

   h1 {
        font-size: 2.5em;
   }

Hope that helps,

Ede

agustin punongbayan
agustin punongbayan
530 Points
agustin punongbayan
agustin punongbayan
530 Points

Hi Ede, thanks a lot, I am so new with coding and just starting to learn html and css and this is a big help already :)

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hi Agustin,

Not a problem. Glad it helped.

Ede

Steven Treadway
Steven Treadway
10,037 Points
Steven Treadway
Steven Treadway
10,037 Points

The only thing that goes inside the () of a media query is your breakpoint. Then inside of the {} is where you change your css styles. The directions can be a little misleading.

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

Hi Steven,

Thanks a lot. Appreciate it very much :)