Freecodecamp: Code should not pass without setting font-size rule for the p element

[sludge256]

Change the Font Size of an Element

Campers are able to pass the tests by setting the font-size in their red-text class and applying the class to both p elements instead of creating a rule for p elements specifically.

Passing code:

<style>
  .red-text {
    color: red;
    font-size: 16px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

The intended solution should be:

<style>
  .red-text {
    color: red;
  }
  p {
    font-size: 16px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

The current situation can cause confusion when working on the next challenge as evidenced by https://github.com/FreeCodeCamp/FreeCodeCamp/issues/6526 .
In the above issue the user added the class red-text to their second p element to match the code they had for their previous challenge (this issue's challenge) which caused the code test(s) to fail.

[robjloranger]

sounds familiar.. if its not done by then i'll do it in the morning. 7pm here

[annzach]

The intended solution mentioned works
if font-family:monospace is added to p which is a condition mentioned

p {
font-size: 16px;
font-family:Monospace;
}

[robjloranger]

It doesn't say to set the second paragraph to red-text. That's more an issue with someone adding extra changes beyond that which the instructions ask for.

[lukebunch]

I have tried this in many different ways in attempts to pass this level, ultimately convinced that the code was correct when it looked like the "intended solution" as seen above. I'm glad I found this because I have since even tried copy-pasting the intended solution above and submitting it, but it still does not work. I have played with the zoom and everything on my computer, but it is not working. I also tried adding the monospace. Any other ideas?

[raisedadead]

I think along with the test case change the instructions should be changed from

Inside the same <style> tag that we created for your red-text class, set the font-size of all p elements to 16 pixels (16px).

to

Inside the same <style> tag that we created for your red-text class, create one more class for p elements and set the font-size to 16 pixels (16px).

[robjloranger]

i agree with @raisedadead except the wording should not be class, we want to style the elements 'p' not create a class and apply it to 'p' elements

[lukebunch]

This is really odd. It still won't let me submit it. I tried creating a second style tag, and the iphone screen display on the right makes the appropriate changes, but it does not let me pass the level:

CatPhotoApp

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

[lukebunch]

[lukebunch]

Any ideas you have on how to fix this would be much appreciated! Thanks in advance!

[raisedadead]

@lukebunch : you are adding an extra style block. put everything in one style block

[robjloranger]

``

CatPhotoApp

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

``

like this

[sludge256]

There are also reports of this challenge not playing well with Internet Explorer 11 if that is the browser you are on. More info here: https://github.com/FreeCodeCamp/FreeCodeCamp/issues/6335

[lukebunch]

I've tried it every way I can think of. Nothing works...

[robjloranger]

what browser? it is working as above for me

[SaintPeter]

@robjloranger You are correct, a p is an element, not a class.

I am ok with changing the instructions as well:

Inside the same <style> tag that we created for your red-text class, create an entry for p elements and set the font-size to 16 pixels (16px).

@lukebunch
Issues are not for code problems. We are trying to work on improving the instructions for this test. Please ask for help in Help Chat.

Others -
Please don't provide code support in issues, since issues are not for code problems.

[lukebunch]

I bet that's the issue. I'm on IE... It's a work issued PC....
I'll see if I can get another browser on here.
Thank you!

[robjloranger]

So i have a fix, i removed the double element check in the assertion for font-size as it seemed redundant to check both elements when we can just check the new one that should not have the red-text class. I then added the same fix as I did in Set the font family of an element by skipping 'p' elements that have the red-text class. If that sounds good I'll work on the description.

[Skinteastwood]

everything is passing and failing where it should.
this is the description i came up with..

Inside the same

CatPhotoApp

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

[jl88s]

I was having trouble also, but for some reason after messing with it a few times and plugging the 'p' and 'style' element differently, it finally worked! Here's what I did:

---

CatPhotoApp

Click here to view more cat photos.