Use @for to Create a Sass Loop - Bug?

HTML-CSS
1

Tell us what’s happening:

Hi guys,

had a look around but it seems like there’s no fixed solution for this problem. I had a look at the console and my code seems to work as intended (so creating the desired effect as specified by the challenge)… but obviously it’s not accepting it. I tried formatting the text with different whitespace and carriage returns but to no avail.

Any ideas ?

Your code so far


<style type='text/sass'>
  
  @for $j from 1 to 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/67.0.3396.99 Safari/537.36.

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

2

You code is okay.

Possible issue: your browser comes with a minimum and maximum font-size that out of the range challenge expected.

Similar issue, please check following thread

3

I was just about the make the same post - I thought I was going crazy…

 @for $j from 1 to 6 {
    .text-#{$j} { font-size: 10px * $j; }
  }
4

I though so too, but I’ve tried multiple different browsers, all with the same result (even Edge, and it just hangs without running the code !). I also checked that post but no luck :frowning:, thanks anyway !

5

That makes two of us :smiley: !

6

That’s expected :rofl:

The exact code from you worked for me, I’m on chrome.

Maybe your browser comes with 3rd party extension may fail the test?! what about run the chrome in safe-mode and try again?

2 Likes
7

@NULL_dev - That’s a good call.

I’ve just gone incognito in my chrome - And it’s worked fine… Clearly an extension having some effect

1 Like
8

I’ve tried on a different machine, Chrome and Firefox, incognito mode on both but nothing. This is really starting to bug me now :confused:

Ignore that. Lo and behold, this morning it decided to work with incognito mode on Chrome (had the same problem on a following challenge “Sass: Apply a Style Until a Condition is Met with @while”, sorted that out too).

Thank you very much guys :slight_smile: !

9

Maybe your chrome works better during the morning :smile:

That’s more evil, since chrome comes with minimum font-size of 6px, so you will never have a 5px. I tried with FF, but it needs luck (when FCC test starts after SASS completes)

Keep going on great work, happy coding.

1 Like
10

Oh no, that worked like a charm too. Don’t know why, don’t know how, but as long as the code is correct, in this case, I’m happy :smiley: !

Thank you very much for your help !

1 Like
11

what’s the solution to this problem? :thinking:
the code is correct but it keeps saying text-1 should be 10px.
I tried in a different browser Edge

12

Without seeing your code we can’t know if it is correct.

  1. Don’t use Edge, use Chrome or Firefox.

  2. If you use Chrome you may have to check the minimum font size settings.

You can put this chrome://settings/fonts into the address bar and checking the minimum font size settings.

1 Like
13

thanks, @lasjorg I’m going to try this. :smiley:
I use chrome but I had to try Edge to see if my code would work.

14

@lasjorg I tried and it worked! :smiling_face_with_three_hearts:

15

Nice, what exactly worked? It’s good to let others know that the fix was for you so they can try it.

1 Like
16

I suppose that’s happening because of the minimum text size that you set in chrome @ chrome://settings/fonts
It seemend that both the text-1 & text-2 classes were having same font size (because of that minimum font size in chrome), so just go to chrome://settings/fonts and change the size to “tiny” temporarily.
Hope this helps!