Search code examples
htmlcssmobilemedia-queries

Media Queries are affecting the desktop version, but not the mobile version

I have a css media query but it seems to be mixed up and I'm not sure why. It's making the desktop version look like what I want the mobile version to be, and the mobile version looks like what I want the desktop to be. Here is the css page in question:

@media (min-width: 500px;) {
    body{background-image:url(ollivanderbackground.jpg);color:#FFFF66;}
    .navigation{color:#FFFF99; border:dotted medium #FFFF99; width: 35%;}
    a:hover{color: #FFFFCC;} 
    a:visited{color: #FFFF1A;}  
} 
@media (max-width: 499px;) {
    .navigation{width: 100%;}
    .bio{display: none;}    
}

in the HTML for the page I have this within the head tags:

<'meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"'>

What exactly am I doing wrong?

Solution

  • I figured it out. It turns out My browser history was really clogged and was loading an older version of the site while trying to mix it with the new CSS and things got really mixed up and weird.

    Clearing my browser data fixed this problem. Thanks to all for your helpful tries!