Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

I am stuck on the Technical Documentation Page in the media queries part. This is my CSS code, /* Reset default margin and padding for body */
body {
margin: 0;
padding: 0;
}

/* Navbar styling */
#navbar {
background-color: #333;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}

.nav-link {
text-decoration: none;
color: white;
margin: 0 1rem;
}

/* Main content styling */
#main-doc {
padding: 2rem;
}

.main-section {
margin-bottom: 3rem;
}

/* Media query for screens with max width 600px */
@media (max-width: 600px) {
#navbar {
flex-direction: column;
align-items: center;
}

.nav-link {
margin: 0.5rem 0;
}
}
the media query i wrote is not passing

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

please describe what’s the issue

3

It is showing you should at least one media query even though i wrote the media query

4

had you nested #navbar and .nav-link in media quarry?

5

/* Media query for screens with max width 600px */
@media (max-width: 600px) {
#navbar {
flex-direction: column;
align-items: center;
}

.nav-link {
margin: 0.5rem 0;
}
}

6

can you share html please

7

I am not able to share the html because it is not allowing and saying that only 2 links per post for the new user, I don’t know what does it means

8

copy paste your code

9

image
image962×768 73.6 KB

11

@media screen and (max-width: 600px){
}

try this code at once

12

nope it’s not working as expected, actually, the code is also not reflected as expected in the freecodecamp itself, but it is working fine in the vs code when I run it in the Chrome browser

13

yes bro, this is can’t understand why this code is not submitting

14

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