Size Your Images - Trouble

Size Your Images - Trouble
0.0 0

#1

Tell us what’s happening:

Good afternoon!

I’m having trouble with exercise. The same you need to be in 100% zoom. That does not allow me to do the next exercise.

Could you help me with this?

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

  smaller-image {
    width: 100px;
  }
</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." class="smaller-image"></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 6.1; 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/#?solution=<link%20href%3D"https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DLobster"%20rel%3D"stylesheet"%20type%3D"text%2Fcss"> <style> %20%20.red-text%20{ %20%20%20%20color%3A%20red%3B %20%20} %20%20h2%20{ %20%20%20%20font-family%3A%20Lobster%2C%20Monospace%3B %20%20} %20%20p%20{ %20%20%20%20font-size%3A%2016px%3B %20%20%20%20font-family%3A%20Monospace%3B %20%20} %20%20.smaller-image%20{width%3A%20100px%3B} <%2Fstyle> <h2%20class%3D"red-text">CatPhotoApp<%2Fh2> <img%20class%3D"smaller-image"%20src%3D"https%3A%2F%2Fbit.ly%2Ffcc-relaxing-cat"> <p%20class%3D"red-text">Kitty%20ipsum%20dolor%20sit%20amet%2C%20shed%20everywhere%20shed%20everywhere%20stretching%20attack%20your%20ankles%20chase%20the%20red%20dot%2C%20hairball%20run%20catnip%20eat%20the%20grass%20sniff.<%2Fp> <p%20class%3D"red-text">Purr%20jump%20eat%20the%20grass%20rip%20the%20couch%20scratched%20sunbathe%2C%20shed%20everywhere%20rip%20the%20couch%20sleep%20in%20the%20sink%20fluffy%20fur%20catnip%20scratched.<%2Fp>


#2

your zoom is probably fine. That note is just there for people who usually adjust the zoom in their browsers. Your problem is with your class definition. It’s missing something. Look at it carefully. Compare it to the other class definition (red-text) .