Ceate css class and use it

HTML-CSS
1

The problem: Your img element should have the class smaller-image .

I did but still doesnt eccept it, whats wrong? line 3 and 25!

  **Your code so far**


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

9.  
10. h2 {
11.   font-family: Lobster, monospace;
12. }

13. p {
14.   font-size: 16px;
15.   font-family: monospace;
16.   }
17. .smaller-image {
18.   widht: 100px;
19.  
20. }
21. </style>

22. <h2 class="red-text">CatPhotoApp</h2>
23. <main>
24. <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

25. <a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat">
26. </a>

27. <div>
28.   <p>Things cats love:</p>
29.   <ul>
30.     <li>cat nip</li>
31.     <li>laser pointers</li>
32.     <li>lasagna</li>
33.   </ul>
34.   <p>Top 3 things cats hate:</p>
35.   <ol>
36.     <li>flea treatment</li>
37.     <li>thunder</li>
38.     <li>other cats</li>
39.   </ol>
40. </div>

41. <form action="https://freecatphotoapp.com/submit-cat-photo">
42.   <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
43.   <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
44.   <label><input type="checkbox" name="personality" checked> Loving</label>
45.   <label><input type="checkbox" name="personality"> Lazy</label>
46.   <label><input type="checkbox" name="personality"> Energetic</label><br>
47.   <input type="text" placeholder="cat photo URL" required>
48.   <button type="submit">Submit</button>
49. </form>
50. </main>
51. ```




52.       **Your browser information:**

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

54. **Challenge:**  Size Your Images

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

You have to spell “width” correct :wink:

3

Your

img

element should have the class

smaller-image

.

4

thanks, I corrected, any Idea how I can solve this one!

5

It looks like you’ve created the smaller-image class twice in your style section.

6

thats not the problem, I´ve removed one! the problem is that img element needs the class of smaller-image and I did that still not working!

7

[quote=“ayaanlefreeman, post:6, topic:481714”]
the problem is that img element needs the class of smaller-image and I did that still not working!

8

What is your current code and what do the failing tests say?

9

my code is in m post what I wrote first!
Failing test says: img element needs the class of smaller-image

10

Resett the code and add the class - NOTHING ELSE :wink:
You changed both the src AND the alt attributes. Why even do that?
The test fails because you changed those, but propably was written assuming nobody would do that, because it doesn’t make sense to just randomly touch attributes you are not supposed to do anything with.

1 Like
11

If you haven’t changed your code at all from what you first posted, then it still has the errors that @Jagaya and I have pointed out.

1 Like
12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.