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 trialagustin punongbayan
530 Pointshtml / 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;) }
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
Full Stack JavaScript Techdegree Student 11,127 PointsHi 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
Steven Treadway
10,037 PointsThe 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
530 PointsHi Steven,
Thanks a lot. Appreciate it very much :)
agustin punongbayan
530 Pointsagustin punongbayan
530 PointsHi 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
Full Stack JavaScript Techdegree Student 11,127 Pointsedeharrison
Full Stack JavaScript Techdegree Student 11,127 PointsHi Agustin,
Not a problem. Glad it helped.
Ede