Help with "Size Your Images"

HTML-CSS
1 
<img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat">

<style>

  .smaller-image{

    width: 100px;

  }

</style>

I tried above html but it seems to be not working. Please help me find issue in the html tags.

2

Welcome, harishmunigala.

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.

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

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

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

For future posts, if you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

As a tip. If you look at the syntax highlighting, it will help you see syntax errors in your code.

It is difficult to help you, without seeing all of the code you have tried. Also, it is difficult without having the link to the related lesson.

Thank you.

1 Like
3

Hi Harish.
I guess you forget to insert the URL of the image before you size it. Just like this url (image link) or background-image: url (link of the image here)
Also, it’s better if you share the link of your code here or project in codepen.

4

Thanks for checking my question. Here is the html I used (still not working).

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .smaller-image{
    width: 100px;
  }
  .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 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="/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>

Link for the challenge

https://www.freecodecamp.org/learn/responsive-web-design/basic-css/size-your-images

5

Thank you, for sharing the code and lesson.

Your code passes for me. So, it is possibly one of the following:

  1. The recommended browser for the fCC curriculum is the latest stable release of Chrome.
  2. Browser extensions can affect the tests. Ensure none have access to freeCodeCamp.
  3. Ensure your browser zoom is at 100%, and you have not changed the default value, in the browser settings.

Hope this helps

1 Like
6

Thanks Sky020! appreciate your help. I am using chrome browser, browser extensions might be causing issue.

Regards!

2 Likes