Feedback: Technical Documentation Page + Problem

Hello, any feedback would be appreciated
Flexbox: Technical documentation page
Problem:
All the tests work just fine but that’s until I reach a certain width after that, the user story #14 (navbar) becomes invalid.
Please note that this problem also occurred when I checked the given example in the challenge:
this one
I don’t know if it’s just me or there’s actually an error in the js bundle.
To reproduce the problem:
Just directly shrink your browser or swap to editor view, then keep shrinking the page/slider
There’s a certain threshold width where it starts to happen.

Hi @LonelyDaoist, it looks good. There are a few things you can revisit.

  • on line 172 you have <integer> which looks like an invalid HTML element. You need to replace the < and > with their HTML entities
  • add padding to the bottom, it looks like your page wants to continue and is being cut off. Besides, you also need to cite a reference where you got your info from. (Unless you wrote all that doc yourself)
  • User story - 6. The .main-section elements should contain at least 5 <code> elements total (not each). I don’t think doing this is a valid way of passing the test;
<code></code>
<code></code>
<code></code>
<code></code>
<code></code>

put some actual code in your doc.

  • The test regarding the navbar states “on regular sized devices…” Don’t worry about the test not passing on smaller devices.

Many thanks, I fixed it

@LonelyDaoist, that looks good. Another thing though;

  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link. You’ll see this error: The <pre> element cannot be a child of the <code> element. Switch them around, <pre> first, then <code>

Also;

  • codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to the <head> click on the ‘Settings’ button and add it into the ‘Stuff for <head>’ box. So, the link to your font-family would go in the box labeled ‘Stuff for <head>’
1 Like