My HTML site is not adjusting correctly when I pull it on a mobile device. It is giving me the desktop layout instead

I am building my first site and the HTML site does not seem to be adjusting to the mobile version. Below is the code I used for the responsive.css page. Help please

@media screen and (min-width: 480px) {

/******************************** TWO COLUMN LAYOUT ********************************/

#primary { width: 50%; float: left; }

#secondary { width: 40%; float: right; }

/****************************** 3 * 5 = 15 100%-15% = 85% 85 / 3 = 28.333333333333 *******************************/

/******************************** PAGE PORTFOLIO ********************************/

#gallery li { width: 28.3333%;}

#gallery li:nth-child(3n+1){ clear: left;}

}
/******************************** PAGE ABOUT ********************************/

@media screen and (min-width: 660px) {

/********************************

Header ********************************/

nav {
background: none;
float: right;
font-size: 1.125em;
text-align: right;
width: 45%;
}

#logo {
  float: left;
  margin-left: 5%;
  text-align: left;
  width: 45%;
}

h1 {
  font-size: 2.5em;
  text-align: left;
}

h2 {
  font-size: 0.825em;
  margin-bottom: 20px;
}

header {
  border-bottom: 5px solid #599a68;
  margin-bottom: 60px;
}

}