Help me im stuck again!2

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

<img src="https://bit.ly/fcc-running-cats "class="img-responsive">

  **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;
}

.thick-green-border {
  border-color: green;
  border-width: 10px;
  border-style: solid;
  border-radius: 50%;
}

.smaller-image {
  width: 100px;
}
</style>

<div class="container-fluid">
<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
<img src="https://bit.ly/fcc-running-cats "class="img-responsive">
</a>
<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>
<form action="https://freecatphotoapp.com/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor"> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality"> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Crazy</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</div>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36

Challenge: Make Images Mobile Responsive

Link to the challenge:

2

You must add a space before class. Then, delete the space that is after the "https://bit.ly/fcc-running-cats "

3

tried it is still isn’t working

4

please when you do changes post your updated code

5

the tests say

Your new image should have a src of https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg .

If I do that change, the code passes for me

6

Tell us what’s happening:
Describe your issue in detail

<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
<img src="https://bit.ly/fcc-running-cats "class="img-responsive">
</a>

<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;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

.smaller-image {
width: 100px;
}
</style>

<div class="container-fluid">
<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cat.jpg" alt="A cute orange cat lying on its back.">
<img src="https://bit.ly/fcc-running-cats "class="img-responsive">
</a>
<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>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36

Challenge: Make Images Mobile Responsive

Link to the challenge:

7

this is not the required URL, you need to use the given one

8

You may have to use the Reset All Code button.

Read the instructions carefully. They say “add a new image below the existing one” and it gives you a URL to use for the src attribute. You have a different value.

Read the error message you get with your code;
You should have a total of two images.
Your new image should have a src of https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg.

Your code has four images.
You also changed the url of the original existing image which is why it no longer appears.

9

i did what you suggested and it still didn’t work

10

can you share the code that you tried?

11

img src="https://bit.ly/fcc-running-cats "class=“img-responsive” Your quotes were misplaced. Also i believe the “m” in monospace is supposed to be lower case

12 
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

<img src="https://bit.ly/fcc-running-cats "class="img-responsive">

</a>
13

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

14

As you were told earlier, you are not using the correct URL.

The lesson says
First, add a new image below the existing one. Set its src attribute to https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg .

On a side note, this far into the curriculum you should be able to use the failing messages to help you see what is making your code fail. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer.

15

ok smart ass thank you

16

image_157478385.JPG
image_157478385.JPG2208×1186 639 KB

Like I said fix the bug before you talk reckless to me

17

Take the period after running-cats.jpg and the space off in your src=. Also take the period from your original alt message out. These two things can cause errors. Roma was not getting smart with you, he/she was only telling you right. The ability to debug your code and spot your errors is a big part of the job and constructive criticism never hurt anyone. Stay calm, read your code over and the reason you’re having a hard time with this lesson is because your copying the text from the lesson instead of typing it. Which is also another thing you need to work on, don’t copy text, get your typing speed up because you’re going to need it if you want to do this for a living.

1 Like
18

I can handle criticism however I will not tolerate disrespect as a human being also I have tried everything you said same outcome but thanks for your advice

19
  1. I am not talking reckless to you nor am I disrespecting you
  2. screenshots really do not help much. it’s better if you post all of your code
  3. I can’t tell too much from the screenshot but what I can see is the error message saying "your new image should have a src of https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg
    and what you have entered is https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg .

Please try entering the the URL provided

EDIT: although it won’t make the tests fail you are tasked with adding a new image after the existing one. The existing one ends with </a>.
You set the new image prior to the </a>.

2 Likes
20

That should work, if not reset the lesson and try again. That means there is an accidental typo that your not seeing