why is the mobile version not applying to the desktop version ?

[foggy anchor]

css validator coming up with this error 😩

[tidal tapir]

(min-width: 961px) {
no ;

and that styling only applies when your screen width is above 961px so it's changing the layout, not really sure what you're trying to do or expecting

[foggy anchor]

to be honest im following this course, and the end product didnt match the tutors, supposedly regardless of the size of the screen the mene buttons should stay aligned on left opposed to list format

[tidal tapir]

Did you put the rest of the styling inside another media query

You might be losing css rather than applying the wrong css

Just open it up with browser inspector and see what css does what when it's correct, and what's different when it breaks

[foggy anchor]

/Begin mobile./
@media screen and (max-width:639px) {

nav ul li {
    border-radius: 1em; 

}

}
/End mobile./

/Begin tablet./
@media screen and (max-width:640px) {

nav ul li {
    display: inline-block; /*This lists items horizontially and allows them to stretch.*/
    border-radius: 1em; 

}

}
/End tablet./

/Begin desktop/
@media screen and (min-width: 961px;) {
no;

header img {
    width:auto;
    height:5em; 
}

nav {
    margin-top: -5em;
    width: 60%;
    float: right;
}

man ul li {
    display: inline-block;
    border-radius: 1em;
}

}
/End desktop/

thats all i have in media queries

sorry if i shouldnt have done that

[tidal tapir]

if you do triple ` key at the start and finish you can do a code block

so like atm the way you sent it I can't copy paste bcus the comments are invalid now

what styling do you have between 640 and 961

mobile: max 639
tablet: max 640
dekstop : min 961

[foggy anchor]

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

nav ul li {
    display: inline-block; /*This lists items horizontially and allows them to stretch.*/
    border-radius: 1em; 

}

}
/End tablet./

/Begin desktop/
@media screen and (min-width: 961px;) {

[tidal tapir]

yeah so is that supposed to be min-width: 640px 😄

might be why it's not doing what you're expecting, they are losing the display: inline-block styling

cuasing them to go back to full widht block elements

[foggy anchor]

omg i think that fixed it what a stupid error on my part

[tidal tapir]

yeahh if you look via inspector you would see the styling is no longer applied

so you can limit your troubleshooting to why is this css not applying

and see if its the selector or the query etc

very useful for figuring things like this out since you see what its doing in real time basically

[foggy anchor]

yeah i get what yah mean i knew there was something wrong in that part of the media query but i think because i been staring at screen for a while it blurred it out to me

thank you for the help though

[tidal tapir]

Yeah no worries, happens a lot when you're first starting

eventually you learn which bits to focus on so you can find this kinda stuff easier

[foggy anchor]

yeah i hope so, at the moment i have a small project for a friend so im trying to do my course around his site, hopefully i get some good practise in this way