Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML Build a Responsive Website Responsive Design Vector Graphics (SVG)

Paul Carmelo Cunanan
PLUS
Paul Carmelo Cunanan
Courses Plus Student 8,862 Points

Swap 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

I'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?

Paul Carmelo Cunanan
Paul Carmelo Cunanan
Courses Plus Student 8,862 Points

body { 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; }

Hi 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
PLUS
Paul Carmelo Cunanan
Courses Plus Student 8,862 Points

Jason Anello

<!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>

Hi 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?