I got stuck in HTML/CSS Part 2, Exercise 1

Hi,

I am struggling with the desktop view approach. I first completed the mobile-view approach and it perfectly works, but for some reason, the text is not horizontal in the desktop-view approach. does anyone know how to fix this?

Thanks in advance

Hello @isabella ,
Could you please send your css code so we can see what is going on exactly ? :slight_smile:
Maybe you are not using the @media propriety correctly ?

Thanks for replying, @Kalraj! Here is the ccs code:

.nav {
display: flex;
flex-direction: column;
background-color: black;
padding: 1rem;
align-items: center;
}

a {
text-decoration:none;
color: gainsboro;
}

li {
list-style: none;
}

@media only screen and (min-width: 768px) {
.nav {
flex-direction: row;
}
}

Hey @isabella ! :slight_smile:

I think you are not using the display propriety on the right element. The parent of li is not .nav but ul. I hope it helps !

1 Like

I have not made it to this lesson yet. However I do know that putting a .nav is asking for the the class nav not the tage. So if you have used a class to define it then that will work but if you are trying to apply the CSS to all nav then you will need to remove the “.” and just use the nav tage!

1 Like

I defined a max-width for media too idk if that did anything, but i think you can go to the media section and override the parent element without affecting the mobile version, I would justify-content right, align-items center, and work from there

1 Like

Hey did you try removing the @media only?

because when I was creating the my own website I remember falling into the same issue, maybe just try @media screen and whatever is supposed to come after this.

1 Like