Cannot Size my Images

[larocque2u]

Tell us what’s happening:
No matter what I try the error keeps saying image should be 100 pixels.

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

class="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 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; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.60 Safari/537.36

Challenge: Size Your Images

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

[JeremyLT]

@larocque2u

class="smaller-image"
{width: 100px;}

this doesn’t look like the other class declarations:

@larocque2u

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

[larocque2u]

Interesting observation. I’m not sure what I am doing wrong.

[topilovasilbek]

Mod Edit: SOLUTION REDACTED

[JeremyLT]

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

[ALLESS]

IN THIS TUTORIAL:
We are being asked to

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

FIRST: To add the class to the image:

<img src=“https://cdn.freecodecamp.org/non-curriculum/non-cat-photo-app/non-relaxing-cat.jpg” [ WE ADD THE CLASS HERE ] alt=“Some cat lying on its back.”>

Adding the class="smaller-image" looks like:

<img src=“https://cdn.freecodecamp.org/non-curriculum/non-cat-photo-app/non-relaxing-cat.jpg”**class=“smaller-image”** alt=“Some cat lying on its back.”>

---

SECOND: We add the class to the CSS:
between the <style> </style> tags:

.smaller-image {
width: 100px;
}

PLACE THE CSS WITHIN THE STYLE TAGS:

[JeremyLT]

Can you see the difference between the two?

Let me write the p style the same way you wrote the smaller-image style

class="p" {
  font-size: 16px;
  font-family: monospace;
}

This is the wrong way to specify a style.

[larocque2u]

Okay. I didn’t get that it would be written two different ways. I got it to work.
Thanks!!

[ALLESS]

Good Job. I’m glad you figured this out.

---