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
Terry Hutt Jr.
1,979 Pointsmedia query code challenge problem that i can't solve
the instructions are "Inside the media query, select the list items inside the gallery and add a width of 28.3333%."
after i right the code it says " Bummer! Be sure to set the width of gallery list items to 28.3333% when the browser is wider than 480px."
but I don't know what I'm doing wrong that code i wrote validates on the css validator site, here's what I'm writing.
@media screen and (min-width: 480px) {
#gallery li{
width: 28.3333%;
}
}
thank you for your help in advance
Terry Hutt Jr.
1,979 Pointsits just a code challenge so there isn't the ability to modify or view the html, unless im not understanding the question. unless you want the link....
2 Answers
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 PointsI just tried a solution to the challenge and passed it. The only difference between my code and yours is that mine has a space between the 'li' and '{'.
I think you should look more closely at all of the code, and make sure every line that needs a semi-colon has one, and there are no missing or extra curly braces.
If you don't find anything, just copy and paste all of the code in your challenge here so I can review it.
Terry Hutt Jr.
1,979 Pointsi found the problem, new to the site and didn't realize that the media query was already a the bottom and the two lines were conflicting. thank you for leading me in the right directions
Raymon Hadder
693 PointsI need serious help: Here is my code:
@media screen and (min-width: 480px) {
/*********************** TWO COLUMN LAYOUT ***********************/
#primary { width: 50%; float: left; }
#secondary {
width: 40%;
float: right;
}
/*********************** PAGE: PORTFOLIO ***********************/
@media screen and (min-width: 480px) { #gallery li { width: 28.3333%; }
#gallery li:nth-child (4n) { clear:left; }
/*********************** PAGE: ABOUT ***********************/
.profile-photo { float: left; margin: 0 5% 80px 0; }
}
@media screen and (min-width: 660px) {
/*********************** HEADER ***********************/
nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }
#logo { float: left; margin-left: 5%; text-align: left; width: 45%; }
h1 { font-size: 2.5em; }
h2 { font-size: 0.825em; margin-bottom: 20px }
header { border-bottom: 5px solid #599a68; margin-bottom: 60px; }
}
Terry Hutt Jr.
1,979 PointsWhat is it saying the problem is?
Raymon Hadder
693 Points" Bummer! Be sure to set the width of gallery list items to 28.3333% when the browser is wider than 480px."
Terry Hutt Jr.
1,979 PointsMake sure there isnt an extra media query in your code somewhere, that turned out to be my problem. I didnt know thar the @media screen and (min-width: 480px)
Raymon Hadder
693 PointsHere is my code: @media screen and (min-width: 480px) {
/*********************** TWO COLUMN LAYOUT ***********************/
#primary { width: 50%; float: left; }
#secondary {
width: 40%;
float: right;
}
/*********************** PAGE: PORTFOLIO ***********************/
#gallery li { width: 28.3333%; }
#gallery li:nth-child (4n) { clear:left; }
/*********************** PAGE: ABOUT ***********************/
.profile-photo { float: left; margin: 0 5% 80px 0; }
}
@media screen and (min-width: 660px) {
/*********************** HEADER ***********************/
nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }
#logo { float: left; margin-left: 5%; text-align: left; width: 45%; }
h1 { font-size: 2.5em; }
h2 { font-size: 0.825em; margin-bottom: 20px }
header { border-bottom: 5px solid #599a68; margin-bottom: 60px; }
}
Terry Hutt Jr.
1,979 Pointsdid getting rid of the extra @:media screen and (min-width: 480px) take care of your problem cause in saw you had two in your first code you posted
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 PointsNicholas Olsen
Front End Web Development Techdegree Student 19,342 PointsCan you post the HTML also?