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
Paul Carmelo Cunanan
Courses Plus Student 8,862 PointsSwap out the appropriate selector in the media query in the CSS so that the Love at First Bite SVG object still disappea
Help!!!
3 Answers
Daniel Jackson
15,099 PointsI'm not sure what your question is. Can you post the css code so we can get an idea of what you are dealing with?
Jason Anello
Courses Plus Student 94,610 PointsHi Paul,
In the media query you have the following rule:
#intro img {
display: none;
}
The purpose of this was to select that img element in the #intro div and hide it when the browser width is below 706px. In the first task though you removed that img element and replaced it with the object element to load the svg image instead.
The challenge simply wants you to change that selector to match the new html that you have.
Paul Carmelo Cunanan
Courses Plus Student 8,862 Points<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css" type="text/css"> <link href="//fonts.googleapis.com/css?family=Nunito:400,300,700" rel="stylesheet" type="text/css"> </head> <body> <div class="grid_2 omega"> <object data="img/love-at-first-bite.svg" type="image/svg+xml" class="chart"> <img src="img//love-at-first-bite.svg" alt="yyy"> </object>
</div>
<div id="featured-cupcakes" class="grid_12">
<div class="grid_2">
<h2>Bacon Me Crazy</h2>
<img src="img/bacon-medium.jpg" alt="Bacon Me Crazy" class="cupcake">
</div>
<div class="grid_2">
<h2>Jalapeno So Spicy</h2>
<img src="img/lime-medium.jpg" alt="Jalapeno So Spicy" class="cupcake">
</div>
<div class="grid_2 omega">
<h2>Avocado Chocolate</h2>
<img src="img/avocado-medium.jpg" alt="Avocado Chocolate" class="cupcake">
</div>
</div>
</body> </html>
Jason Anello
Courses Plus Student 94,610 PointsHi Paul,
Not all of your html is showing up. https://teamtreehouse.com/forum/posting-code-to-the-forum
What part are you stuck on? Have you checked my answer yet?
Paul Carmelo Cunanan
Courses Plus Student 8,862 PointsPaul Carmelo Cunanan
Courses Plus Student 8,862 Pointsbody { font-family: 'Nunito', sans-serif; font-weight: 100; font-size: 1.25em; color: #faf3bc; background-color: #420600; }
.grid_1 { width: 15.625%; } /* 125px/800px = 15.625% / .grid_2 { width: 32.5%; } / 260px/800px = 32.5% / .grid_3 { width: 49.375%; } / 395px/800px = 49.375% / .grid_4 { width: 65.625%; } / 525px/800px = 65.625% / .grid_5 { width: 83.125%; } / 665px/800px = 83.125% / .grid_6 { width: 100%; } / 800px/800px = 100% */
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { margin-right: 1.25%; float: left; display: block; } .alpha { margin-left:0; } .omega {margin-right:0; }
.container{ width: 90%; max-width: 800px; padding: 4% 0; margin: auto; } img { max-width: 100%; } h1 { font-size: 1.750em; line-height: 1.25em; font-weight: 100; letter-spacing: -2.75px; }
h2 { font-weight: 100; font-size: 1.15em; color: #b4c34f; } .cupcake { box-sizing: border-box; background-color: #faf3bc; padding: 8px; margin: 0 0 5% 0; }
@media screen and (max-width : 705px) { .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { width:100%; } #intro img { display: none; } h1 { font-size: 2.75em; }