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.https://codepen.io/samodienshameegh54/pen/jOYEZNP
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.
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
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
.nav-link{
a:hover {
color:red;
}
}
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
.nav-link{
a:hover {
color:red;
}
}
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
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
