Size Your Images. I don't get it!

HTML-CSS
1

Tell us what’s happening:
It doesn’t work! I’ve been looking for answers here as well, it looks the same as the other ones. I’ve checked everything and it seems fine but it doesn’t work. My resolution is at 100%. Can someone please check this? I already put them together in the same style nest but it doesn’t work either.

Your code so far


<link href="https://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;
  } 
</style>

<style>
.smaller-image {
    width: 100px;
  }
  <img class="smaller-img" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
  
  <div>
    <p>Things cats love:</p>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
  </div>
  
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/size-your-images

2

You created the class in your style. Now you just have to apply it in your image.

Create a class called smaller-image and use it to resize the image so that it’s only 100 pixels wide.

3
  • There should only be one set of style tags.
  • HTML elements should never be inside style tags.
  • The class name you add to the HTML element must be the same as the class name you define in the CSS.
1 Like
4

I’ve made it! Thank you!

5

add tha class name in the image tag in
and create the class in tag
there should be only one set of tag