Basic CSS: Size Your Images 2

<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 class=“smaller-image” 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>

Rethink what you’re trying to resize. Are you trying to resize an anchor tag? Or are you trying to resize the image?

Add the following css to resize your image (img) tag.

.smaller-image img{

width: 50 px;

}

@dianaug The OP has that correctly in their code. I was pointing out that the lesson wasn’t passing correctly because of where the class was implemented in the HTML section of their code.
Since it’s a lesson we try and gently guide rather than giving the answer.

1 Like