The same HTML + CSS gives different results in freecodecamp vs Codepen

HTML-CSS
1

I wrote in Codepen some code to test out formatting and priorities, and was confused about the result, so tested in in freecodecamp and got a totally different result (see image for exactly what’s going on).

code
code596×842 104 KB

Can anyone explain this behavior? Am I getting priorities incorrect or is this weird website differences?

2

This statement isn’t making sense to me. What do you mean by “tested in freecodecamp”? What exactly did you do?

3

I don’t know exactly what the area is called- I ran it in one of the little html and css test areas where you write code for the freecodecamp curriculum- one of the cat photo app ones. I just deleted everything regarding that actual challenge.

4

Oh, so it sounds like you removed all the code from a challenge and replaced it with your own code for testing. I don’t recommend that. I don’t think the FCC challenges were set up to be testing environments like that and there may be things going on behind the scenes that will affect your code. Codepen is where you want to create and test your own code.

5

That’s what I would have figured, but I had reached the end of my (admittedly very limited) troubleshooting skills within it. Can you suggest any reasons I might have been getting the results I did in Codepen? (or a forum that I should look at)?

6

I don’t know what the problem is with your codepen. You’ll need provide much more information on what you are trying to do.

7

I am trying to make the background of several elements purple, and I am trying to override an inline border-radius declaration with one marked !important in the CSS editor.
When the border-radius declaration is the last item in the style block, the correct border radius is applied but the backgrounds are not purple.
When it is the first item in the style block, the backgrounds are purple but the border-radius is not applied.

<style>

h2 {
  font-size: 20px;
  background-color:	#bea9de;
  border-width: 3px;
  border-color: #000;
  border-style: solid;
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
}
#mono-text{
  font-family: monospace;
}
img {
  border-radius: 50%!important;
}
</style>

^^ This is negating the purple backgrounds and I don’t know why.

8

Ahh, I see now. Get rid of the <style> tags in the CSS editor. You should not have them in there and I think once you remove them you’ll find that your CSS is working.

P.S. You are not the only person who has made this mistake. I’m not sure why codepen can’t just automatically remove them?

1 Like
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.