Trying To Size Your Images

Tell us what’s happening:
Hello, I am new to this, but I am giving it the old college try. I am trying to size the img of the CatPhotoApp. When I try to run it, this is what it gives me for a message
( Your img element should have the class smaller-image. Your image should be 100 pixels wide.)

Please Help

  **Your code so far**<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
.red-text { color: red; *.small-image {* * width: 100px;* * }* * * h2 { font-family: Lobster, monospace; } p { font-size: 16px; font-family: monospace; }

CatPhotoApp

Click here to view more cat photos.

A cute orange cat lying on its back.

Things cats love:

  • cat nip
  • laser pointers
  • lasagna

Top 3 things cats hate:

  1. flea treatment
  2. thunder
  3. other cats
Indoor Outdoor
Loving Lazy Energetic
Submit

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
  color: red;
.small-image {
  width: 100px;
}
 <img class="fixed-image" src="http://www.fonts.googleapis.com/css?family=Lobert"/>

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>
  **Your browser information:**

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

Challenge: Size Your Images

Link to the challenge:

This is where your error comes from. The class name is supposed to be .smaller-image not .small-image and also you need to add that specific class class="smaller-image" to the img tag in the code.

WOW I can believe I missed that; I need more sleep. Thank you so much.

I wish you well!

Hello again I have tried the way you have said, and it is still giving the same message. Do you possible have any more suggestions.

Can you provide your current code. Try not to leave anything out.

Yes,
.smaller-image {
width: 100px;

{

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>

  .smaller-image }

    width: 100px;

    

  {

  height: 100px;

  width: 50%;

  }

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

This :point_up_2: should be written as :point_down:

.smaller-image { width: 100px; }

Also, make sure in your HTML markup you add the smaller-image class to the <img> tag whose image you are trying to resize.

These are the requirements for the challenge and their corresponding solution:

  • Your img element should have the class smaller-image.
    This asks you to add the class to the img element and you do that like this:
<img
  src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
  class="smaller-image" 
  alt="A cute orange cat lying on its back.">

There should be three attributes in the img element. The src, class, and lastly the alt.

  • Your image should be 100 pixels wide.
    Now it is time to style the img element in the <style> tags using the class added to it:
.smaller-image {
   width: 100px;
}

This will resize the image from its current size to 100px.

I hope this solves every concern. Happy coding :+1:!

I am sorry to be a pest but, when you are refereeing to the <img element would this go in the or outside.

I am sorry I missed spoke, with the <img element would this go inside or outside the

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Thank you so much for pointing that out for me. I do want to let you know that you guys are awesome. Next week I have a check coming in and I will bed donating to this company. I am starting a blog shortly; I am going to mention this company and how people need to try this.

Its okay @heinrich1016 helping each other is the purpose of the FCC. It’s fine not to get it right. Whenever you’re adding attributes to any HTML elements in this case <img> it must always be inside the tag and if it is a tag that has both opening and closing tags like <div></div> you will add these attributes in the opening tags like this <div class="background-image"> </div>

To make it easy for you, add the class="smaller-image" in the <img> element after or before the src= attribute

Yes, thank you so much and sorry for being a pain but, I want to make sure I fully understood. I have a great passion for coding and such. I wish I would have started earlier in life.

I wish you well!

You’re very much welcome.

I understand this but I’d also like to say there’s no right/perfect time to learn how to code. The most important thing which you have just done is “starting” and that’s all you need.

Luckily the FCC curriculum is designed in a self-paced fashion allowing you to take your time to properly learn each technology at your own convenience with a supportive community always available to help.

Each course is designed for a 300hr time frame but you don’t have to complete them in 300hrs. I believe this is just to encourage every developer to take as much time as needed for each course.

My advice is don’t just learn to pass the challenges or projects, learn to understand. If ever you get stuck, do not feel ashamed or shy to ask for help, only then can other developers help you and you also get to learn more.

Stay motivated and happy coding :+1:!

Thank you so much and that is so encouraging. Learning to understand is exactly what I am going to do.
This is so awesome!

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