skaggy
March 14, 2022, 1:13am
1
OKay im getting a bit frustrated!? like the image resizes? i dont know why it wont let me move forward? i have moved around where i places "class=“smaller-images” i just cant figure it out?? anyhelp is appreciated
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-images {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-images"img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" 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 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36
Challenge: Size Your Images
Link to the challenge:
edper
March 14, 2022, 1:24am
2
The challenge says
Create a class called smaller-image
and use it to resize the image so that it’s only 100 pixels wide.
Check your spelling name for your class because the bot tester here would like to have the same name that it requires you to do.
Also, when you have a class in an element be aware that it is not a good idea to put a closing " close to an attribute. For example width="100"height="100"
would be better like this width="100" height="100"
.
skaggy
March 14, 2022, 3:40am
3
idunno its just not clicking? iv went over it and over it everything looks fine…and even in the preview or w.e on the right side of the scrren, the img resizes like i dont get it…this is what i have
<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;
}
<style>
.smaller-image {
width: 100px;
height: auto;
}
</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-images" width="100px" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" 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>
i cant see the problem
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>
) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).
edper
March 14, 2022, 4:49am
5
Check again the spelling of the class as I’ve said earlier. The other one is singular and the other one is plural.
You have two opening style tags
skaggy
March 14, 2022, 7:31pm
7
i was trying to see what u meant by the spelling and i duno im just not seeing it
thanks for the help
Here is what you wrote
skaggy:
class="smaller-images"
But the directions want this
Create a class called smaller-image
See the difference?
1 Like
skaggy
March 14, 2022, 7:47pm
9
wow…now i do…thank you thank you verry much…i dunno how much longer i woulda overlooked that either…jeez much appreciated
1 Like
system
Closed
September 13, 2022, 7:47am
10
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.