Resize image CSS

[benson7092]

Need help with resizing image.

  **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>

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

<a href="#">
<sytle>
  .smaller-image { 
  width: 100px; 
  height: auto;
  } <img class="smaller image" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" 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="https://freecatphotoapp.com/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/99.0.4844.74 Safari/537.36 Edg/99.0.1150.46

Challenge: Size Your Images

Link to the challenge:

freeCodeCamp.org

[Cryptic_X]

The main problem lies here:

@benson7092

<sytle>
  .smaller-image { 
  width: 100px; 
  height: auto;
  } <img class="smaller image" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

1. You have created a new style element(though you have named it <sytle>), this new style element is not required.
2. You have to put the .smaller-image class in the already existing <style> tag which you will see if you scroll up.

@benson7092

<img class="smaller image" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

3. As you can see you have typed in class="smaller image",
   the browser will read this as an img element which has two separate classes called smaller and image, to correct this you need to change smaller image to smaller-image
   
   
   
   Hope this helps