Browser Zoom issue, Cannot pass the test

HTML-CSS
1

Tell us what’s happening:
Hey guys,

I think I have some browser zoom issue that makes me unable to past this test. I have tried to reset the zoom of the window from minimum to maximum. Nothing worked so far. Is there a quick fix for this problem?Thank you.

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;
  height: auto;
}
</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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36.

Challenge: Size Your Images

Link to the challenge:

2

It is not the browser; it is you :slight_smile:

When you are selecting the class in CSS file, you should put “.” dot.

It seems like you have missed to put it. When you place a dot, it’s going to pass just fine.

3 
smaller-image {
  width: 100px;
  height: auto;
}

Browser zoom isn’t your issue. That hint is in there because it’s possible to fail the tests even if your code is correct when your zoom is weird. In this case, your image is not set to 100 pixels wide because you have an error in how you declared your selector. To declare a class selector, you need to use a period (.), like the .red-text selector above. Just using smaller-image {... would be creating a selector for an element that looks like <smaller-image>...</smaller-image>, like the p and h2 selectors above.

4

Thanks, I have added the dot but the problem is still the same, the error is still the zoom. I also reset the lesson and tried again, nothing has changed. And I don’t know why wether I added the dot or not, it would still select the smaller-image.

5

On Firefox and Chrome [ctrl]+[0] will reset the browser to 100%. If you’re still having issues, you might have something else funky going on with your browser. Do you have any extensions that change the appearance of websites (such as a dark mode extension)?

6

Thank you, I’ve added the dot back, but still not passing.

7

What browser are you using? Do you have any extensions running? Have you tried running it in incognito mode? What is your current code?

8

I am using chrome 80. Just tried in the incognito mode, didn’t work either.

9

When I correct the selector, it works in both Chrome and Firefox. What is your current code?

10

My current code is the above code with a dot added. I just tested, it worked in Microsoft edge. I guess it’s the Chrome issue. Thanks for your help.

11

The correct code does work in Chrome, so there may be something funky with your Chrome configurations. I don’t know if whatever issue you’re having will affect other challenges or not.

12

Yes, could be my chrome, other challenges are all good so far.