Problem with passing Size Your Images challenge

HTML-CSS
1

Tell us what’s happening:

Hi guys, I’m trying to pass this challenge and I still get below error message:

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

Please help; I checked other people’s posts on forum and it seems that the code is correct but somehow it fails the test. I also zoomed my browser to 100% so it’s a dead end as well.

Can anyone suggest any changes to the code or maybe my browser/operating system configuration to make it work?

Your code so far:


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

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/size-your-images/

2

Try resetting the challenge and putting your solution in again. Your solution is passing for me.

3

I tried Reset All Code option - didn’t work - same message.
Then I logged out and in and still nothing changed.

4

Are you by any chance using Edge, IE, or Safari as your browser? Free Code Camp has been updated to use newer technologies. It makes the application much faster and it means that we can go much longer without having to do a huge migration like the recent one. However, Edge, Internet Explorer, and Safari are very bad about choosing not to adhere to standards and support new functionality in JS and CSS. Right now, that means that these browsers exhibit lots of unexpected behavior. If you become a web developer you will come to hate these browsers with every fiber of your being.

5

I’m using Google Chrome Version 70.0.3538.67 (Official Build) (64-bit).

6

Try clearing the cache and cookies, otherwise maybe try Firefox for this assignment at least, it should work.

7

I used a different laptop and it worked. The laptop that I had the problem on was ASUS ZenBook UX410U. If anyone would have similar problem then maybe trying to pass the challege on different device will help.