I really need help, so i am doing a technical site for my HTML/CSS curriculum and i don’t know why but my @media query doesn’t apply. I don’t know why is that and i do have to say that i don’t really understand the media query very well, would appreciate your help!
btw one more thing bothering me is that all my text is as link and only navigation bar should be, would appreciate help with that to.
Thanks in advance!
Link to my CodePen project:
- Remember to link to the CSS file in the HTML in the freeCodeCamp editor.
<link rel="stylesheet" href="styles.css">
- Validate your HTML.
I didn’t understand your second question but for your first, in my test, the media query worked. (I opened your site on chrome, then setup the developer tools so I can watch what the browser was applying in terms of css styles, and when i decreased the size of the viewable area to below 815 the media styles kicked in).
Perhaps explain with more detail what style/line it is you think didn’t work (or how you tested).
I can see now that it works in fcc but just nit in codepen, maybe its macbook i don’t know. But thanks for help
The media query works for me on Codepen. Why do you say it doesn’t work?
As for the second question, validate your HTML. You have errors that are causing it.
1 Like
On CodePen it shows like its not applying it to anything, i mean media query.
About the second part all my text is as link for me, where ever i go with mouse it shows pointer and when i click it takes me to different part of page, not just the navigation bar but all text and i don’t know what’s the cause of that.
Because you are not closing your a elements. Like I said, validate the HTML.
1 Like
Sorry to bother you again. I passed the test(thanks again for help). Now I’m just trying to learn more, i applied hover stat to navigation bar and added a display of block and when i hover it just highlights text, i want that highlights the entire block, could you help me?
ps when i add display block it just highlights a bit more than text.
You can set the hover color on the container instead, so the li element.
But I might suggest moving the padding from the li to the a element and setting the a element to display: block. That way it is easier to click the link and you can also set the background-color on the link (as it will take up the full width/height of the li container).
:active-page isn’t a valid pseudo-class I assume you meant :active.
1 Like
ohh thank you, it was all that i was looking for!
Do you mean moving background-color to a element? Because when i do that my inner shadow disappears.
Yes i ment :active. Is there a pseudo-class that highlights the container that you are currently on?
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.