Basic CSS: Size Your Images .Please help me,I dont know why it is wrong

HTML-CSS
1

Here’s the link of the question:
https://learn.freecodecamp.org/responsive-web-design/basic-css/size-your-images/

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

.smaller-image { width: 100px; zoom: 100%; } ...

But it failed.Can anyone help me out?Thanks a lot!

2

You don’t need zoom:100% in your style. The instructions just say zoom:100% because some people could be zooming in the browser to view contents bigger.

Then apply your newly created class to the cat image.

1 Like
4

Even with the zoom setting (shimphillip is right, you don’t need that).

It worked for me. Did you apply the class to your img tag? Can you show what that looks like?

1 Like
5

Thank you,I’ve deleted zoom and apply it to the image :
https://learn.freecodecamp.org/responsive-web-design/basic-css/size-your-images/
but still cant pass the test,dont know why:confounded:

6

Can you please post the whole code you are trying to use?

7

Here’s my code,thank you!

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


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

This looks fine in my browser. And it passes the tests.

Perhaps you need to reset your zoom level in your browser.

1 Like
9

Your code looks okay, what does that error say .?

1 Like
10

So that passes just fine.

Clear your cache and restart your browser. If you’re not using Chrome, try chrome.

1 Like
11

Sorry,I am new to it.I will keep it in mind,thanks!

12

it say:
// running test
Your image should be 100 pixels wide. Browser zoom should be at 100%.
// tests completed

13

You can try what @Tirjasdyn has suggested, chrome works better for FCC

14

wow,it works!I just tried 360 browser and it passed.thanks very much!:kissing_heart:

15

Thanks a lot!You also solved my solution :star_struck:

16

Thanks!It turns out to be the browser problem.

1 Like