Technical Documentation Page Final Submission

I finished the 4th project. It passes at desktop screen size, but fails at small screen size. I guess this is to be expected?

Small Screen size Error

Please run this test in a larger window (before any media queries) : expected 619 to be above 850
AssertionError: Please run this test in a larger window (before any media queries) : expected 619 to be above 850
at Proxy.f (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:549:2957)
at Proxy.u (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:431:130)
at Function.n.isAbove (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:574:960)
at n. (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:608:131927)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:259477
at ny.Tg.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:259772)
at r.Qg.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:274680)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:275616
at o (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:274033)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:274103

Also I’ve noticed Codepen isn’t rendering my last media query for super small screens. Has anyone any idea why this is? jsfiddle is slightly better, but at full screen runs into the same problem.

I designed this on VSCode and locally on chrome it works fine…

1 Like

@Codemiester yes I think that it is expected when designing it on sites like codepen and VSCode. When I too finished most of my other projects and view them from a mobile point of view it looks more muddled up but sometimes clear in some situations.

I guess it’s like that.

1 Like

Your page looks good @Codemiester. Some things to revisit;

  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    • Reference MDN Docs
      You can nest those code snippets in an HTML element to preserve whitespace and line breaks. I’ll leave it to you to research that.
      Or there’s a property: value; pair you can use in CSS to preserve whitespace and line breaks. Again, I’ll leave it to you to research.
  • Use a contrast checker. The page is hard to read.
1 Like

This is really helpful @Roma , thank you. I’ll get to researching this today.

Hi @Roma, I had some time to go over this today.

I’ve updated to remove the
from the end of each paragraph. Looking at the rendering I don’t think the
tags are even doing anything within the code tags? But My guess is it could still cause problems with the screen reader?

What are your thoughts. Should I take deep breath and delete the rest of them? :upside_down_face:

If you’re talking about the <br> elements then yes.
You can nest those code snippets in an HTML element to preserve whitespace and line breaks. I’ll leave it to you to research that.
Or there’s a property: value; pair you can use in CSS to preserve whitespace and line breaks. Again, I’ll leave it to you to research.

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