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 trialLivvy Reece
1,649 PointsCreate a breakpoint for devices 480 pixels wide or larger
please help i have tried several times to fix this with no success
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 (max-widht: 480px)
{
body{
background:navy;
}
}
Livvy Reece
1,649 Pointsthank yiu very much Brian! would you be able to also help in this? https://teamtreehouse.com/community/inside-the-media-query-clear-the-left-side-of-every-4th-item-in-the-gallery
1 Answer
Sanjay Tailor
8,443 PointsTry this code: NOT max-width but min-width... when the screen size is minimum 480 and above
@media screen and (min-width: 480px) {
body {
background: navy;
}
}
mikes02
Courses Plus Student 16,968 PointsThis is the correct answer, it is asking for 480 pixels and above, therefore min-width: 480px is the appropriate media query. If it was asking for a maximum of 480px and below, you would use max-width: 480px instead.
Livvy, if this addresses your question, it is strongly encouraged that you select it as the Best Answer. This awards the contributor of the correct answer some bonus points, and also lets others know who may be facing the same or similar issue that there is a correct answer within this thread.
Brian Steele
23,060 PointsBrian Steele
23,060 Pointsyou have a spelling error in 'width'