Technical Doc Page < code > style problem

Hey guys, i’ve started the Technical Documentation Page project and i’m having some trouble when using the < code > tag; the code style will extend to the whole page overriding the style defined by body and do some other weird stuff. Can’t find where i’m wrong.

Right now i’m using a custom class for those codes called “dialog” insted of using code tag, but that’s not a solution i guess.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:79.0) Gecko/20100101 Firefox/79.0.

Challenge: Build a Technical Documentation Page

Link to the challenge:

1 Like

A guess could be that you forgot a closing tag for <code> </code>, then it might want to take over the page…

Also, something you might want to take a look at is this:

To represent multiple lines of code, wrap the <code> element within a <pre> element. The <code> element by itself only represents a single phrase of code or line of code. Source

1 Like

You just edited while i was trying to copy the code you provided xD.

Not sure it’s a closing tag problem:

For example, That code tag turned everything into monospace font.

This is the way i’m “solving” it.

Yes, sorry about the example!

This is what I mean:

//your code here

The reason is that <code> is an inline element, and it’s recommended to wrap it in pre tags to get it going.

If you get another anomaly let me know…

1 Like

It keeps destroying my other styles.


Seems to work fine in freecodecamp’s example somehow…

Does this look as expected?

Let me know if you see the same output than before, or what.

1 Like

It looks fine actually,

I’ve rewritted every < code > tag and now it’s seems to work; as you said, it was probably an open tag thing (feeling like an idiot right now :/)

Thanks for your time pal !!!

You’re welcome, feel free to send me a message anytime you have an issue. Good luck.

1 Like