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

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

Same problem and my browser is set to 100. Any hints?

Can you post your code?

Sure. And Chrome browser is set to zoom 100 //image

.smaller-image; {
width:100px;
height:auto;
}
.red-text {
color: red;
}

Have you applied the .smaller-image class to your img?

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.

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>]

lol, thanks - only saw the link fix msg now:)

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

I literally cannot believe I missed that

Thanks guys well spotted, but it still shows the browser challenge undone?

The cute kitty just cost me four days…:scream:
image :

Why do I see <class> tag in there? What is going on?

^ 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>

That’s awesome it worked, Prince! :pray:And thank you all for helping too!:slight_smile: That’s not all…:blush:

Amazeballs! I’ve been blessed with twins!:joy::rofl:
image

1 Like