Tech Doc Finished - Need 1 tiny aesthetic can't figure out

Back End Help
#1

Hello everybody and good day!

I have finished (cept for proof-reading), my Tech Doc and have one question.

I have code examples and they are great. However, they do not line up with the paragraphs on the left. I would like to keep them at 90% the size of the paragraphs and line them up on the left. When I go into the page inspector and put the examples (in red) up to 100% font-size, they line up perfectly, however I can’t make them stay that way.
The other matter is, I want to change them to ‘darkred’ to match the other content and again, I can change the color in the inspector, but again, they do not stay ‘darkred’.

How do I do the changes and all the while, keep the code examples at 90%. I’m not that great at Debugging, yet.

Have I merely missed what CSS category I need to name them?

Draw On Me Tech Doc

Thank you all and have a great day!

#2

You have a lot of different nested elements with margin-left and padding-left so the accounting is hard to keep track of.

I would suggest something like margin-left on your main to make room for your navigation (300px in your case) then some padding to give a space between your text and the borders of main. That will left justify all your paragraphs nicely without any math and the style would all be on one element.

Also, many of your units are fixed so while your content is where you want it at full size screen as the screen gets smaller those fixed sizes do not get smaller. In your case mostly things are moved too far right. Consider using percents or vw units instead. Even better take some time to explore flexbox. Flex tends to take care of such things at different screen size for you.

#3

It is already in flex container.
Also, the mobile is not activated because of the testing requirements for the page.
Therefore, it is not suited for a small apparatus. Only large screen.
I’m pretty sure most of my measurements are already in percentages and ems.

I’m not talking about the paragraphs.
I’m talking about the text in red. The example codes for the page’s JavaScript.

#4

You may not want to use the code tag. Simply assign a css class to your p tag and style it. I tried doing it to one of the p elements as follows:
//html
< p>
The markup that must be used to style the contents prior to assigning script is similar to:< /p>
< p class = “darkred-text”>< canvas id=“myCanvas” width=“200” height=“100” style=“border: 3px solid darkred;”>< /canvas>< /p>

//css
.darkred-text{
color:darkred;
}

#5

Sabahat70 ~ Ty. That worked. I also see that the code tag was making the white marks on the page.

Do you know an easy css way to shrink the canvases back down to a respectable size?