My Technical Documentation page should use at least one media query

Tell us what’s happening:
Describe your issue in detail here.
I cannot seem to pass the media query part of the technical documentation task.

Your code so far
link to code over here.

Your browser information:

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

Challenge: Build a Technical Documentation Page

Link to the challenge:

I would run codepen’s CSS analyzer on your CSS.

1 Like

HI @shameeghsamodien54 !

Welcome to the forum!
Are you trying to use SCSS?
If so, then you will need to set that in the css settings.

When I make that change and format your file, then the test passes for me

1 Like

Hi i’m not using the SCSS preprocessor. Should i be using that?

If you are not familiar with it, then don’t worry about using it.
The reason why I asked is because you have alot of nesting going on so I wasn’t sure if you were trying to use SCSS.

You are writing stuff like this

  a:hover {

which you don’t find in regular css.

Change the preprocessor back to none.
It also looks like you changed the media query to this

 @media max-width(720px)

The max-width is supposed to be inside the parenthesis.
Here is the correct syntax

Then you will need to format your file.

The last thing you want to do is getting rid of this nesting stuff here

  a:hover {

remove all instances of nestings.

your entire css file should follow this format

img {
  height: 100px;
  padding-left: 20px;
  max-width: 100%;
  float: left;

.main-section {

a:hover {
  color: red;

go through the entire css file and make sure you are using the correct syntax and there are no missing curly braces.

Once I fix those things, then it passes for me

booya, I checked all my curly braces and it change the settings. it worked!!! thank you so much

1 Like

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