freeCodeCamp: This code seems to be right but it's not working

Challenge Waypoint: Size your Images has an issue. User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/601.2.7 (KHTML, like Gecko) Version/9.0.1 Safari/601.2.7. Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:

<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
 } 

  .smaller-image {

    width: 100px; 
  }

</style>



<h2 class="red-text">CatPhotoApp</h2>

<img src="https://bit.ly/fcc-relaxing-cat"> 



<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 28 (8 by maintainers)

Most upvoted comments

You’ve added class="smaller-image" to the img tag so that it looks like <img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat">?

+10

ltegman on Nov 3, 2015

It needs to go in both. When styling using CSS class selectors you need to declare the rule (this is what you’re doing in the) <style> area with

.smaller-image {
  width: 100px;
}

but that css rule will only be applied to any HTML elements that have been tagged with that class using the class="smaller-image" syntax.

When the instructions state “Create a class called smaller-image and use it to resize the image so that it’s only 100 pixels wide” it is expecting you will apply the lesson from “Use a CSS Class to Style an Element” where it more explicitly instructs you to style something using a CSS class selector by telling you each step involved in the process.

ltegman on Nov 3, 2015

Awesome! 😄

ltegman on Nov 3, 2015

Earlier lessons like this one cover how css classes are used to style an element.

ltegman on Nov 3, 2015

Thanks so much, that makes sense and worked!

On Nov 3, 2015, at 3:26 PM, Logan Tegman notifications@github.com wrote:

It needs to go in both. When styling using CSS class selectors you need to declare the rule (this is what you’re doing in the) <style> area with

.smaller-image { width: 100px; } but that css rule will only be applied to any HTML elements that have been tagged with that class using the class=“smaller-image” syntax.

When the instructions state “Create a class called smaller-image and use it to resize the image so that it’s only 100 pixels wide” it is expecting you will apply the lesson from “Use a CSS Class to Style an Element” where it more explicitly instructs you to style something using a CSS class selector by telling you each step involved in the process.

— Reply to this email directly or view it on GitHub https://github.com/FreeCodeCamp/FreeCodeCamp/issues/4150#issuecomment-153476523.

ghost on Nov 3, 2015