Please guys how do I set this to 100px wide?

HTML-CSS
1

please how do I set this to 100px wide?

  **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="#"><img 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>

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


  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.61 Safari/537.36

Challenge: Size Your Images

Link to the challenge:

1 Like
2

Hi @abigealamanda !

Welcome to the forum!

I would reset the lesson because you have a few errors here

Create a class called smaller-image

Use the img they already gave you here

You don’t need to create a new one.

Add your class there.

use it to resize the image so that it’s only 100 pixels wide.

In the style tags, You will refer to the class name and add a width of 100px.

These are the style tags.

<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, monospace;
  }

  p {
    font-size: 16px;
    font-family: monospace;
  }
</style>

If you need extra help, then revisit the example they gave you.

FCC example:

<style>
  .larger-image {
    width: 500px;
  }
</style>

Hope that helps!

3

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