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

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

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


#3

Please do not change the topic category. I changed it to HTML-CSS, because the questiont is related to HTML-CSS.

Thank you.


#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?


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


#9

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


#10

So that passes just fine.

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


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