Use @for to Create a Sass Loop - Not passing tests even though Dev Tools shows it has the right font-size

HTML-CSS
1

Tell us what’s happening:
I have double checked my code. I also checked the Dev Tools and the first

tag has the correct font size. I think this is a bug in the tests, because it’s not passing.

02-21-52-30
02-21-52-301920×1080 479 KB

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

Link to the challenge:

2

Your code worked for me, try copying it and then clicking “reset code”, refreshing the page and entering it again. Sometimes this can help if the tests are being buggy.

3

Are you by any chance using Edge, IE, or Safari as your browser? Free Code Camp has been updated to use newer technologies. It makes the application much faster and it means that we can go much longer without having to do a huge migration like the recent one. However, Edge, Internet Explorer, and Safari are very bad about choosing not to adhere to standards and support new functionality in JS and CSS. Right now, that means that these browsers exhibit lots of unexpected behavior. If you become a web developer you will come to hate these browsers with every fiber of your being.

1 Like
4

I actually had to download Firefox to get anything involving font-sizes to work correctly. I also had problems with the media query challenge not passing.

By the way, I almost exclusively use Chrome for my web browsing. So you might want to add that to browsers that aren’t working 100% with your setup.

As further data for you, it is font-sizes 10px of smaller that are causing issues. Anything above that I haven’t had any trouble with it.

5

you are using 1 through 6 not 1 to 6 (I got caught out the same) - the exercise is specific in that and will fail unless you use the “TO” method

6

Actually once I used Firefox, it passed the way the code was written.