Size Your Images help me i'm stuck here

HTML-CSS
1

Tell us what’s happening:

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;
  }
  img {
  .smaller-image
    width: 100px;
    }
  
</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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

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

3

what do you need help with? Could you please include some more info so we can help you with the issue?

4

browser zoom should be at 100%

5

image element should have smaller image

6

The image element is the following part of the code:

<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">

You need to add the class attribute to this element and assign it the value “smaller-image”. This solves part of the challenge.

The main part of the challenge is to create a class named “smaller-image”. In the example code, they showed you how to create a classed named “larger-image”. Use the example as a guide to how you should create your “smaller-image” class in between the <style> and </style> tags.

The code you started to write (shown below) attempts to define something for all image elements using the img selector. That is not what you are supposed to be doing. See if you can follow my suggestions and complete the challenge.

  img {
  .smaller-image
    width: 100px;
    }
1 Like