Size Your Images help 101

Size Your Images help 101
0.0 0

#1

Tell us what’s happening:
I have the class code set up and it is stating that i haven’t resized my photo. Am I coding the class incorrect?

Your code so far


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
		.red-text {
		color: red;
	}

	.smaller-image {
		width: 100px;
	}

	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 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; rv:60.0) Gecko/20100101 Firefox/60.0.

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


#2

You aren’t applying the class .smaller-image to any image.


#3

umm could you show me some code that includes the image by any chance? I was trying to model off of the .text-red class above but it didn’t work. my bad it didnt post that correctly. I had <class=“smaller-image” after <a but before href"#" and it still didnt work on the image.

.red-text { color: red; }
.smaller-image {
	width: 100px;
}

h2 {
	font-family: Lobster, monospace;
}

p {
	font-size: 16px;
	font-family: monospace;

CatPhotoApp

Click here to view more cat photos.

<a class="smaller-image" href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."</a>

#4

Just worked it out thanks for your help!!