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.

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

john melville
john melville
9,675 Points

Targeting love-at-first-bite svg for media query I cant work out the code to select this element. Thanks

I need help in targeting this selector love-at-first-bite

index.html
<!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="container">
            <div id="intro">
                <div class="grid_4">
                    <h1>We're kicking taste buds in to high gear with our featured avocado chocolate cupcake from the west to the east coast.</h1>
                </div>
                <div class="grid_2 omega">
                  <img src="img/love-at-first-bite.gif" alt="Love at First Bite">
                </div>
            </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>
    </div>

</body>
</html>
styles.css
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;
  }
}

4 Answers

Kostas Oreopoulos
Kostas Oreopoulos
15,184 Points

No need to add anything.

You are inside a div with id #intro and then inside a div with class grid_2 omega and you want an image

So its just #intro .grid_2_omega img {}

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 90,825 Points

Is the SVG saved as a .gif image?

I'm not sure if this is how the challenge wants it done but I would give the image an id or a class e.g.

 <img id="loveAtFirstBite" src="img/love-at-first-bite.gif" alt="Love at First Bite">

And then I'd be able to select with with the following.

#loveAtFirstBite {
    //styles
}

Hope this helps.

john melville
john melville
9,675 Points

Thanks for the reply Jonathan that helps I can,t remember the other code for the svg challenge I will post later.

john melville
john melville
9,675 Points

Thanks Kostas I appreciate the help.