Please i need help with this my code is correct and my browser zoom is set at 100% but i can’t pass the challenge:
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>
.larger-image {
width: 100px;
}
</style>
</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-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its bac."></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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36
.
Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/size-your-images
There shouldn’t be any <style>
tags here. You also probably meant .smaller-image
, not .larger-image
Manj
February 3, 2019, 11:17am
3
Same problem and my browser is set to 100. Any hints?
Manj
February 3, 2019, 1:08pm
5
Sure. And Chrome browser is set to zoom 100 //
.smaller-image; {
width:100px;
height:auto;
}
.red-text {
color: red;
}
Ascii
February 3, 2019, 1:18pm
6
Have you applied the .smaller-image class to your img?
Manj
February 3, 2019, 1:30pm
7
Sure have, thanks. Here is code //
<a href="#"><img class="smaller-image"src=//sorry cannot include full link due to new user restrictions
//and screen shot 1 test passed, but browser challenge still persists.
Manj
February 3, 2019, 1:47pm
10
Sure:) just have had the https and word link omitted as mentioned previously.
Plse delete opening [and closing] else it’s unable to send.
[< href="://fonts.googleapis.com/css?family=Lobster" rel=“stylesheet” type=“text/css”>
<class>
.smaller-image; {
width:100px;
height:auto;
}
.red-text {
color: red;
}
</class>
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 class=“smaller-image"src=”://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>]
Manj
February 3, 2019, 1:58pm
11
lol, thanks - only saw the link fix msg now:)
lasjorg
February 3, 2019, 2:11pm
13
You have a semicolon in front of the selector
.smaller-image; { /* <-- remove the semicolon */
width:100px;
height:auto;
}
Also use the code formating when posting code.
1 Like
Ascii
February 3, 2019, 2:13pm
14
I literally cannot believe I missed that
Manj
February 3, 2019, 2:25pm
15
Thanks guys well spotted, but it still shows the browser challenge undone?
Manj
February 3, 2019, 2:33pm
16
The cute kitty just cost me four days…
:
arigoru
February 3, 2019, 2:51pm
17
Why do I see <class>
tag in there? What is going on?
lasjorg
February 3, 2019, 3:01pm
18
^ Yep it should be just
<style>
...all your CSS
</style>
Hello Manj! I was stuck as well at this challenge for not knowing how to specify the class of a img element, BUT i just figured it out! You actually need to specity it just after the img source link, so it would look like this:
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" class="smaller-image" alt="A cute orange cat lying on its back."></a>
Also, as everyone else said in this topic, there are no class tags. You should specify the class inside the style tag.Like this:
<style>
.smaller-image {
width:100px;
}
</style>
I belive that by typing “.smaller-image” you are creating that class, so you can use it along your code, but as i’m still very new at this, I could also be wrong. Hope it works for you!
This code should have been written thus:
<a href="#"><img class=“smaller-image" src=”://bit.ly/fcc-relaxing-cat" alt=“A cute orange cat lying on its back.”></a>
Manj
February 4, 2019, 5:49am
21
1 Like