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

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

john melville
john melville
9,675 Points
Posted by 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
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 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 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
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
john melville
john melville
9,675 Points

Thanks Kostas I appreciate the help.