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)

What's wrong with this Challenge?

It's super simple, the challenge says to change .git to a .svg and I can't get it to work. Is it me or the is there a glitch in the Matrix?

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.svg" 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;
  }
}

2 Answers

jacob weber
jacob weber
20,743 Points

That technically should/would work but the challenge is looking back at how to insert an SVG object. Look back at the previous video at about the 3:00 mark. Hope that helps!

Brent Suggs
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 Points

The challenge says to replace the img tag with the correct mark-up for the SVG object. That would mean using the <object> tag, as shown in the video, and then providing a <img> fallback for older browsers. Not sure the fallback is part of that first step, but not as simple as replacing 'gif' with 'svg'.