Reducing Image Size

Hi all,

I am stuck on this one… trying to reduce image size and have tried all other examples shown on previous comments. Still doesn’t work.!
still getting the below message,

Your img element should have the classsmaller-image. Your image should be 100 pixels wide.

Can anyone assist please?

  **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://bit.ly/fcc-relaxing-cat" 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/91.0.4472.114 Safari/537.36 Edg/91.0.864.54

Challenge: Size Your Images

Link to the challenge:

2 Likes

Hello! So to do this, you’ll need to:

  • Create a CSS class of .smaller-image within the <style> tag
  • Use the width property in your newly created class to change the image to 100px.
  • Give your img element the class "smaller-image".
  • Hope this helps!

2 Likes
<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;
  }

.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://bit.ly/fcc-relaxing-cat" 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>
2 Likes

Hi,

Thank you for your response,

I copied and pasted this text and still get the error…

<style>

.red-text { color: red; }

h2 {

font-family: Lobster, monospace;

}

p {

font-size: 16px;

font-family: monospace;

}

.smaller-image {

width: 100px

}

</style>

Still says “Your element should have the class smaller-image.”
“Your image should be 100 pixels wide.”

Thanks for your response,

This is what I have done but still gives me the error;

<style>

  .red-text {

    color: red;

  }

  h2 {

    font-family: Lobster, monospace;

  }

  p {

    font-size: 16px;

    font-family: monospace;

  }

  .smaller-image {width: 100px;

  }

</style>

Hi @Ric1 and @vesau0611 !

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 (’).

1 Like

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.

You can post solutions that invite discussion (like asking how the solution works, or asking about certain parts of the solution). But please don’t just post your solution for the sake of sharing it.
If you post a full passing solution to a challenge and have questions about it, please surround it with [spoiler] and [/spoiler] tags on the line above and below your solution code.

Please ensure that you have disabled any extensions that interface with the freeCodeCamp website (such as Dark Mode and Ad Blocker), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

Please add a class after img

answer redacted

Then css by

answer redacted

Hi, thank you for the reply. I have added the class as suggested 1st manually to understand the concept then I copied and pasted.
Still shows the error.

p {

    font-size: 16px;

    font-family: monospace;

  }

<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

.smaller-image {

  width: 100px

}

</style>

After making the suggested changes, can you show us your full code including the CSS and HTML?

Heyy! Try this solution instead. Be sure to get back at me if this works so that I can explain what this code actually does!

sorry it was my fault.

answer redacted

@vesau0611, please stop posting full solutions. You were asked to stop previously

Please add ; after 100px

@Ric1, looking at your original question you were tasked with two things;

  1. creating a class called smaller-image and
  2. use it to resize the image so it it only 100px wide

Your original code does not have this.

Please post your updated code. The post by jwilkins.oboe shows how to properly format code to add it to this post.

Edit: In your subsequents posts it looks as though you correctly added the smaller-image class inside the style tags. Did you also remember to add this class to the img element?

I have edited your post to properly format your code.
Please review my earlier post on how to write code into the forum .

Also, you need to post your full code so we can test it ourselves.
Not bits and pieces of your code.

That way we can determine if there is an error in your code or an issue with your browser interfering with the tests.

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