I think there's something wrong here

I followed up the videos up to this point and noticed that when I refresh the page, it just doesn't behave like the one in the video. So I checked again the video and my css and they are the same.

Nick, the thing is that when I re-size my browser window to full size, my Portfolio images are on two columns and when I re-size it to a minimum width, it's on three columns. So I switched the css for the 480px media query with the 660px and it works. I'm guessing it's logical that the 3 column layout be rendered on a large screen, while the two column one be rendered on a small mobile screen.

You might notice I added the "width: 45%" to the first 480px media query, but later commented it out because I remembered what the "C" from css stands for. :))

I encountered the same issue with the profile pic on the about page, so I moved the css for the 660px media query part, and it works "like advertised". :)

Here's my current responsive.css file:

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

/***************
TWO COLUMN LAYOUT
****************/
/*
    #gallery li {
 width: 45% 
}
*/

  #primary {
    width: 50%;
    float: left;
      }
  #secondary {
    width: 40%;
    float:right;
  }
}

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

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

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


  #gallery li {
 width: 28.3333% 
}

#gallery li:nth-child (4n) {
  clear: left; 
}


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

.profile-photo {
 float:left;
 margin: 0 5% 80px 0;
}
}

This is my current responsive.css file and my page works like the one you refresh in your video.