I can’t get this code to work:
How do I size my Image?
The question is telling me to do this…
“Create a class called smaller-image
and use it to resize the image so that it’s only 100 pixels wide. Your img
element should have the class smaller-image
.
Your image should be 100 pixels wide.”
<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>
<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://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>
ALLESS
March 26, 2022, 11:31pm
2
Before we can answer your question:
Go ahead, and Copy and paste the entire code from the Tutorial that you are working through Here, and pre format it.
To share code, you can use the Preformatted text button.
This allows you to share raw code :
Just select the code that you want to keep raw, and press the button.
The image on the right is raw code .
Then leave a link to the Tutorial that you are on.
I don’t see where you have tried to do this. Can you share code where you have tried to do this?
Is there a portion of the instruction on the first part of this that we can help explain better for you?
E só chamar sua “class” !
Exemplo:
.smaller-image {
width: Por o seu valor ;
height: Por o seu valor;
}
também da pra usar o ‘picture src’
Espero ter ajudado com o exemplo!
ALLESS
March 27, 2022, 12:00am
5
IN THIS TUTORIAL:
We are being asked to
Create a class called smaller-image
and use it to resize the image so that it’s only 100 pixels wide.
FIRST: To add the class to the image:
<img src=“https://cdn.freecodecamp.org/non-curriculum/non-cat-photo-app/non-relaxing-cat.jpg” [ WE ADD THE CLASS HERE ] alt=“Some cat lying on its back.”>
Adding the class="smaller-image"
looks like:
<img src=“https://cdn.freecodecamp.org/non-curriculum/non-cat-photo-app/non-relaxing-cat.jpg” class=“smaller-image” alt=“Some cat lying on its back.”>
SECOND: We add the class to the CSS:
between the <style> </style>
tags:
.smaller-image {
width: 100px;
}
PLACE THE CSS WITHIN THE STYLE TAGS:
1 Like
Thank you so much! I got so lost on this problem! But I finally was able to fix it thanks to your help and everyone in this forum. I am forever grateful. I am a newbie programmer and trying to learn as much as I can. Studying to become a software engineer!
1 Like
ALLESS
March 27, 2022, 3:44am
7
This Tutorial is not Explicit about everything that needs to be done to pass, a lot of people have some difficulties with the Instructions.
Exactly! Yeah it gets confusing at times. But now I’m doing just fine and progressing through it! ^FT^
system
Closed
September 25, 2022, 4:55pm
9
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.