Incorrect Test Result (fail): Apply a Style Until a Condition is Met with @while

Incorrect Test Result (fail): Apply a Style Until a Condition is Met with @while

My code is executing and displaying the correct output, and I can even see in devtools that all of the elements have the correct classes applied to them, but one of my tests is still failing:

Any ideas about what’s wrong here?

Your code so far

<style type='text/sass'>
  $x: 1;
  @while $x <= 10 {
    .text-#{$x} { font-size: 5px * $x; }
    $x: $x + 1;

<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>
<p class="text-6">Hello</p>
<p class="text-7">Hello</p>
<p class="text-8">Hello</p>
<p class="text-9">Hello</p>
<p class="text-10">Hello</p>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.75 Safari/537.36.

Link to the challenge:

If you’re on an Apple device, it might have set a default minimum text size of 10px for your browser. If that’s the case, the tests will fail.

I’m on my Windows 10 machine

It might still be worth checking the default font sizing settings in your browser. You also want to make sure that a zoom isn’t applied.

I can see clearly in DevTools that the font-size is not 10px, but is 5px:

There is no zoom applied

When I run your code in my browser, it passes all tests. You can try resetting the code and pasting the above solution in again. Otherwise, it’s some sort of browser setting.

Used Firefox. No problems there. Something wonky with Chrome. Thanks.

This is one of the super fun things about web development.

Yeah. I’m just surprised that something as simple as font-size is translated differently across browsers.

Oh you sweet summer child…

(But in this case it is more likely either some internal setting in your Chrome instance or some weird side effect of an extension. Your code passes fine in Chrome for me.)