Apply a Style Until a Condition is Met with @while.. not selecting text-1 class

HTML-CSS
1

Tell us what’s happening:

Your code so far


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

<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 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while

2

Are you by any chance using a Mac? There seems to be a setting that many Mac users don’t know is active which sets the minimum font size of browsers to more than 5px.

Regardless of OS, you should look at your browser settings for minimum font size.

3

Thanks a ton! Solved it. Minimum font size on chrome was the problem. :slight_smile:

4

Glad I could help. Happy coding!

1 Like