Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Daniel Creasey
Daniel Creasey
Courses Plus Student 2,161 Points

Media Queries - changing an inline list back to a normal style list when scaling for an iPhone using media queries.

Ok...

On my webpage i have a simple nag bar across the top of the page... This nav bar is an inline list!

My goal is to style this inlist into a normal list fashion (one list item below the other) when using media queries for iPhone.

Iv set up my meta tag in html and also the correct @media screen but cannot get it to work.

Here is what iv got...

My css for my nav bar on my web page....

.nav li {
    font-family: 'Nixie One', cursive;
    color: white;
    font-size: 30px;
    display: inline;
    margin-right: 20px;
    text-align: center;
    border: 2px solid white;
    border-radius: 20px;
    padding: 7px;
}

and here is my media querie...

@media screen and (max-device-width: 479px ) {


    .nav li {display: list-item;}

}

Any help would be much appreciated guys !!!

Dan

2 Answers

Daniel Creasey
PLUS
Daniel Creasey
Courses Plus Student 2,161 Points
Daniel Creasey
Daniel Creasey
Courses Plus Student 2,161 Points

I solved my problem !!! But if you feel i could write my code better feel free to say !!!

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Have you tried this yet?

.nav li {
display: block;
}