Setting my browser to zoom at 100%

Setting my browser to zoom at 100%
0.0 0

#1

Tell us what’s happening:
Im having a problem setting browser to zoom at 100%. How do I set that property in CSS

Your code so far


<meta name="viewport" content="width=device-width,initial-scale=1.0">
<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; 
    zoom:100%;
}
</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>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/size-your-images/


#2

I think that you have to configure the zoom of the browser to be at 100%, not using css code.
In Firefox you could go to View>Zoom>Normal, if I am not mistaken.


#3

zoom isn’t a CSS property. Some people like to zoom in or out using their browser (to make text larger or to see more on their screen). The instructions to set your browser’s zoom to 100% is just to warn those people that the tests will not pass unless they set their browser back to (the default) 100%.


#4

Hey!

I think Ctrl+Wheel scroll will help you to normalize the zoom in your browser.

But if you tried this and still have the issue, you always can write here more detail what you’ve already tried to do and for sure we’ll help you.

Did you try to check your code in another browser?