Help with my Technical Documentation Page project

HTML-CSS
1

I have a problem with the horizontal scroll bar. no matter what I do (I.E add/change margin/padding for the main element, section, article,etc) the whole text section does not fit into its place. Also when the horizontal scroll bar is moved the text moves behind the nav-bar which is another headache which I can’t fix.
I tried everything I knew and added almost every related code from the project example but it did not work.
I would really appreciate if you guys help me out. Thank you.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36

Challenge: Build a Technical Documentation Page

Link to the challenge:

2

A few thoughts:

  • What is the purpose of setting position: absolute on main?
  • You’ve got some code examples that are really wide. You’ll need to figure out a way to handle those.
  • Don’t use vw units only for font size as it is a major accessibility issue. You need some other type of responsive unit in there. For example, you could do calc(1rem + 1vw).
  • There is a way to prevent overflow from creating a horizontal scroll bar (see the CSS overflow property) but then you will need to make your content more responsive (code examples, images) so that it doesn’t get cut off when you narrow the browser.
  • At some point you need to use a CSS break point to shift the layout so that the menu is on the top and the content is underneath.
3

The images also are not resizing, make them responsive. As for the code blocks, you can add overflow: auto to them.

For the font size, you can also check out the clamp function. Make sure you do not allow the size to get too small. Making the text small is pretty much never the correct thing to do, the layout should support legible text.

4

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