Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

Hello,

I have been trying for a while to complete this project, to be able to complete the course. I have read different posts related to similar issues and have tried everything they advise without any luck. According to the console, this is the problem:

“Your Technical Documentation project should use at least one media query.”

As you can see in my code, I have added media queries to the CSS. I even added a style tag directly to the HTML with the media query, because the problem seems to be that the HTML is unable to detect the CSS, even though in the preview window the CSS is applied.

I have also read suggestions that if I restart the project the problem might solve itself, but I haven’t been successful in achieving that.

I would really appreciate it if someone could help me solve this issue. Thank you in advance!

Your code so far

(https://codepen.io/luztunon16/pen/RwyrbMq)

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Welcome to the forum!

You have some syntax issues with the queries.

Check out examples here and compare with your code

3

Hello! Thank you so much for your response!

According to your suggestions, I have followed the recommendations of the article, but I still have the same issue.

If you check the codepen, you can see that the media queries are being applied successfully in the preview, but when running the tests on freecodecamp, it states that there are no media queries, even though the preview shows them being applied (please refer to picture below).

image
image1917×850 158 KB

Please let me know if you know a way I can solve this problem.

Thank you very much in advance!

4

do you have new code to post? If yes please post it. If not, please confirm.

edit:

also you should fix your @media statements as they do not seem to be correctly formed
you can see examples of correct media statements here:

(I did notice other issues as well in the html. You can try running Analzye HTML in the codepen to see one of those. You probably also shouldn’t have a style section and a separate stylesheet but I don’t know if the test cares about that)

5

Hi!

Yes this is the updated codepen: https://codepen.io/luztunon16/pen/WNJKMmx

I have removed the styles tag from the HTML and just kept the stylesheet, and modified the @media statements according to w3schools.

Thank you for the tip of “Analyze HTML” in codepen! I didn’t know about that feature and was very helpful for other aspects.

After everything, I still have the same issue with the test, that it isn’t detecting the media queries. I am considering starting everything over. Do you know a proper way to restart a single test in freecodecamp?

Again, thank you very much for your help and your time!!

6

In this case you can just delete the code from the index.html tab or styles.css tab which is how you would restart from scratch.

7

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