Use @for to Create a Sass Loop - .text-1 issue

Tell us what’s happening:

I am getting an error saying the .text-1 {font-size: 10px} isn’t processing as true

Your code so far


<style type='text/sass'>
  
  @for $j from 1 through 6 {
    .text-#{$j} { font-size: 10px * $j; }
  }
  
</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>

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/sass/use-for-to-create-a-sass-loop

Have you tried the challenge using Chrome?

Yes, that’s mainly what I use actually.

We have recently changed this challenge do deal with an issue with some campers’ browser settings (Chrome specifically), but the changes have not been deployed to production. Try going to chrome://settings/fonts and make sure you set minimum font size to the lowest setting, and see if that allows you to pass all the tests. Your code is correct.

Also, make sure your Zoom is at 100%.

I’m going to guess that you’re on an Apple device. By default, they seem to use a browser setting that sets a minimum font size.

That worked :slight_smile: thank you

Yeah but I did change the minimum setting bc there is no way I can read 10px font size lol so it was my min font setting that was causing the issue

The change ae made to rhe challenge starts the minimum size to something larger, in case someone has the setting higher