Resize image CSS

Need help with resizing image.

  **Your code so far**

<link href="" rel="stylesheet" type="text/css">
.red-text {
  color: red;
h2 {
  font-family: Lobster, monospace;

p {
  font-size: 16px;
  font-family: monospace;

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

<a href="#">
  .smaller-image { 
  width: 100px; 
  height: auto;
  } <img class="smaller image" src="" alt="A cute orange cat lying on its back.">


  <p>Things cats love:</p>
    <li>cat nip</li>
    <li>laser pointers</li>
  <p>Top 3 things cats hate:</p>
    <li>flea treatment</li>
    <li>other cats</li>

<form action="">
  <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>
  **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:

The main problem lies here:

  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.
  1. 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 :slight_smile:
1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.