Tell us what’s happening:
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;
}
</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 (X11; CrOS x86_64 10323.67.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.209 Safari/537.36
.
Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/size-your-images
No, you need to create a CSS class named smaller-image and use the width property to make sure the width of element the class is applied to is 100px wide. The example shows you exactly how to do this for a class named larger-image which sets the width of an element to 500px wide.
1 Like
Tell us what’s happening:
Your code so far
<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 href="#"><img
.smaller-image {
width:100px;
}
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 (X11; CrOS x86_64 10323.67.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.209 Safari/537.36
.
Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/size-your-images/
hbar1st
August 12, 2018, 12:53am
#4
This is the problem.
To add a class to the img element you have to define it a different way.
Review the previous lessons to learn how to define a class on an element.
1 Like
Why did you add the above code? All you had to do was add the class in the style section (which you did successfully).
1 Like
just create a class next to the img tag like class=“smaller-image” and then inside the style tag you need to put width of the image like- .smaller-image{width:100px;}
1 Like
That has already been done in the code posted by the OP. Also, be careful with your wording. You do not create classes in tags. You add a class attribute to an element’s opening tag and assign it one or more class names which have been created within the style element or via external CSS file.
1 Like
Don’t take it personal , i was just trying to help, that’s it and i have run the code and it work in my case and that’s why i write this. No big deal,sir.
sojib-bd:
Don’t take it personal , i was just trying to help, that’s it and i have run the code and it work in my case and that’s why i write this. No big deal,sir.
I was not taking anything personal. I just wanted to make sure the OP understood what you were suggesting was already done. I had previously replied that the OP needed to remove the part I highlighted.
Ok,Sir… basically i am a new member. I have no idea about rules or the perfections.Next i will try to suggest the exact thing.