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
Morrice Pfeiffer
4,162 PointsAdd the appropriate CSS within the same media query that will force the “love at first bite” illustration to disappear.
Been struggling with this.
My brain feels very tiny and not very "powerful"..LOL
@media screen and (max-width: 705px){ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%; #intro img { display: none; } }
Where am I messing up?
Thanks
Moe
9 Answers
Nikolaos Papathanassopoulos
10,322 PointsYou're just missing a curly bracket:
@media screen and (max-width: 705px){
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
width: 100%;
} <------
#intro img {
display: none;
}
}
~ Nikos.
Hannah V. Smith
5,783 PointsI had the exact same problem, missing the curly bracket. I spent about an hour pulling my hair out until I figured it out. lol
Morrice Pfeiffer
4,162 PointsOk next step
Now, within that same media query, add the appropriate CSS to increase the size of the level one header to 2.75em.
I am having problems getting my head around nesting rules.
Code below
@media screen and (max-width: 705px){ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%; } #intro img { display: none; #intro h1 { font-size: 2.75em; } }
Morrice Pfeiffer
4,162 PointsOOOOOOPPPPPPPPPPSSSSSSSS
Never mind.
I answered my own question.
Now if I can just remember the question.......
In any case problem solved.
Morrice
alan heath
5,188 PointsI was having the same trouble. I just moved the closing bracket of the media query to below the h1 rules and changed the font size for the h1.
Kirill Titov
12,119 PointsHad a lot of headache with this one. Still trying to understand why my selector does not work)))
@media screen and (max-width: 705px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
width:100%;
}
/*--- Instead of #intro img ---*/
.grid_2 omega {
display: none;
}
}
Ziya Jamalov
6,116 PointsMy answer, may be, out of main subject... anyway
img[alt="Love at First Bite"] {display:none;}
works
Julio Miranda
8,322 PointsI believe that might work to pass the challenge although it doesn't seem to be quite right. The image should dissaperar only at 705px. Here is a right way to do it: @media screen and (max-width: 705px) { .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%; }
intro img { display: none; }
}
Julio Miranda
8,322 PointsI believe that might work to pass the challenge although it doesn't seem to be quite right. The image should disappear only at 705px. Here is a right way to do it: @media screen and (max-width: 705px) { .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%; } intro img { display: none; } }
Carsten Pleiser
8,386 Pointsanother way that worked for me:
@media screen and (max-width: 705px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
width: 100%;
}
img[src="img/love-at-first-bite.gif"] {
display: none;
}
Gage Smith
6,529 PointsSo why doesn't using the ".grid_2 omega" selector work? Am I dense? Shouldn't that be the appropriate selector?