How to make the browser zoom at 100%?

<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 class= "smaller-image" src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/6/1/61a3499c5abb165be990aa0c1abd23342e60c663.jpg' 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>

Which browser are you using? Most browsers have settings that adjust the zoom. You can probably google your specific browser to see where that adjustment is done.

My browser is Google!! How to set?

Error : Your image should be 100 pixels wide. Browser zoom should be at 100%.
Can you tell me what is that mean,?

This is my code

  .smaller-image {
    width: 100px;
  }

and then I add

 a href="#"><img class = "smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a> 

I know. I have corrected but the error is still here.

<style>

  .red-text {
    color: red;
  }

  .smaller-image {
    width: 100px;
  }

  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="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>

Sorry, I am a rookie.

My browser is Google.
I have tried but I still can not pass. :((

Your image should be 100 pixels wide. Browser zoom should be at 100%.

Thank you very much. I pass this challenge!!!

I found my browser’s zoom is 90%, so I clicked the Crtl Key and +.

1 Like

Hi guys, i’ve come here because i had the same problem. I’ve tried the solutions that you said but no one of them solved my 100% zoom’s problem. What solve my problem was resize the browser’s zoom out and click on “run the tests” each time that i resized the browser, until arrive the value of 75% zoom. That’s what solved my problem :wink:

1 Like

Nothing suggested here works for me. The code seems to be fine, but I can’t pass the test because of this browser zoom thing. It’s really annoying.

Without seeing your code it’s hard to help. Please post your code.

Thank you, lasjorg, but I figured it out. Turns out I used two different class names, sigh. Took me quite a while before I figured that out ;-).

thanks you so much.!