Apply a Style Until a Condition is Met with @while_2

Apply a Style Until a Condition is Met with @while_2


Tell us what’s happening:
I can’t pass this challenge, it doesn’t pass the font size requirements. Weird thing is that when I change the incrementor, it passes some of that requirements. Does anybody have an idea how to fix it?

Your code so far

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

<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/66.0.3359.181 Safari/537.36.

Link to the challenge:


You have to set the first .text-1 to 5px in order to work with the function. Now it just like you have created a function but you have not even used it yet.

  $x: 1;
  @while $x<=10{
    .text-#{$x} {



@while $x<11 {
.text-#{$x} {font-size:5px*$x;}

This code seems to work, but it doesn’t pass the challenge. According to the inspecting tool, everything has the right font-size.


yeah there are some inner fcc issues going on. So some challenge series are behaving weirdly. This code also didn’t work for me in first couple of tries.But after i reduced some unnecessary gaps and spaces in the code. It worked fine. Then again i went back to see if it would work again or not , and it didn’t .So yeah there are some issues going on in fcc. Hope they will fix those soon.


Still not working for me after playing with spaces.


Has there been ANY movement on this. Looks like this bug was reported at least three weeks ago and I’m still having the same issue.

Also just noticed that, in the preview window, even though normally the preview displays correctly, when I run the code to validate, it shows all the lines the same size while it’s validating.


At last, I had to add these lines to pass the test:

<style type="text/css">
    .text-1 { font-size: 5px; }
    .text-2 { font-size: 10px; }



Finally got this working by running it in Safari. In Chrome and Firefox not even hard-coding it, as roxetter suggested, worked. Copied and pasted the code directly in Safari so there was absolutely no difference in the code in Safari vs Firefox and Chrome.