This is driving my insane

Hey guys, so for this problem, I know that I am supposed to include .smaller-image{width: 100px;} along with including the class=“smaller-image” in the img tag. As you can see by my code below, this is exactly what I have done.

The previous shows that the image itself has shrunk to 100px from the original size but it still produces the error that it is not 100px. So I am extremely confused and frustrated right now. I’m not sure whether its a bug in my code or what’s wrong but if the preview shows it as 100px, why does it still say “Your image should be 100 pixels wide.”.

This is driving me insane, please help.

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="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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.3 Safari/605.1.15.

Challenge: Size Your Images

Link to the challenge:

Hi and welcome to the forum!

Your code passes for me. I would double check that none of your browser extensions change your CSS and your zoom is set to 100%.

Also, Safari has an issue that is interfering with some of the freeCodeCamp challenges, so I’d try a different browser.

A recent update broke this challenge in Safari. One of our awesome contributors has figured out how to fix it, but the fix will take time to get into the application. In the mean time, you can skip the challenge (these are not required for progress) or you can submit your solution in another browser.

2 Likes

are you on Safari? there is a known issue with this challenge with Safari.
you can try a different browser, or just manually go forward to next challenge from the challenge list

Oh wow, the response that I got is so fast!

Yes I am using safari! Its more lightweight than chrome (chrome eats up your ram so I thought it would be a good option. I’ll probably use chrome moving forward.

Thanks for the help!

1 Like

I tried chrome and it worked! I guess that the problem really lies with the browser.

I’m not sure whether I saw it on the home page but given the bugs present in the safari browser, it would be good to indicate something like “best use with chrome” so that students wouldn’t have to experience what I faced haha.

But its just a suggestion.

Once again, thank you so much for your help!

We officially support Firefox, Chrome, Safari, and Edge. This was just a temporary outage. By the time we got a notification on the page, the fix would be in anyway. :smiley:

Ahh, I’m glad to hear that. Thank you!