Basic CSS: Size Your Images ... Help!

HTML-CSS
1

Tell us what’s happening:

Hello, i cannot pass the lesson, please help me!

Your code so far


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>

.red-text {
 color: red; 
 }

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}
.smaller-image {
width: 100px;
}
</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. "class=“smaller-image”></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_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Safari/605.1.15.

Challenge: Size Your Images

Link to the challenge:

2

Hello,
The class in your img element is wrong. You need to use = there, not :.

class="smaller-image"

With that change it passes the test.

1 Like
3

Thanks, but still asks for 100px photo

4

I have the exact same problem, I think it’s a bug or smth :frowning: I tried to reset the code and do it again, but same problem, even though it’s 100px and the pic actually got smaller on the screen, the test doesn’t see it.

1 Like
5

I can confirm that changing the above code to swap : for = will pass the challenge.

If you are still having an issue, please post your updated code.

6 
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>

.red-text {
   color: red; 
   }

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}
.smaller-image {
  width: 100px;
}
</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. "class=“smaller-image”></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>
7

That code passes for me. I would double check that you have set your browser zoom to 100% and have disable all extensions for freeCodeCamp, especially extensions that modify your CSS.

8

But it still doesnt pass the test. i dont know how to get further

9

Did you double check that you have set your browser zoom to 100% and have disabled all extensions for freeCodeCamp, especially extensions that modify your CSS?

10

yes, mby my problem is that i am doing that through mac?

11

Are you using Safari? Safari does not to all web standards. Have you tried using Firefox?

12

No, because i dont have it

13

I’d try Firefox or Chrome and see if that fixes the issue.

1 Like
14

Yup, thanks @JeremyLT , turns out Safari was the problem. Installed Firefox and it worked. Many many thanks, I was getting really frustrated

1 Like