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
Hannah Cook
Courses Plus Student 794 PointsAdding CSS within a media query to force an illustration to disappear from the site
Can anyone help me figure out what code I need to use in this case? I feel like I am overlooking it but I just cannot figure out how to make the image disappear. I have tried versions of
intro-img, #about {
display: none;
}
but with the image name in the code. The challenge is to insert the appropriate CSS code within my media query:
@media screen and (max-width: 705px) { .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%; } }
that will force the illustration "love at first bite" to disappear from the Smells Like Bakin site.
3 Answers
bothxp
16,510 PointsHi Hannah,
You need to select the img tag within the div with an id of intro. So that will look like:
#intro img {
display: none;
}
so that would be:
@media screen and (max-width: 705px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
width: 100%;
}
#intro img {
display: none;
}
}
Grayson Sabin
6,911 PointsHannah you need to put the code in your @media for it to work just FYI
@media (max-width:705px) {
#intro img {
display: none;
}
}
Hannah Cook
Courses Plus Student 794 PointsThank you! The
intro img {
display: none;
}
}
worked!