For the record, I haven't read the scotch.io post that I linked here; I just did a search for "media query mobile screen max-width" looking for some typical screen sizes. This was one of the first results that came up and looks like it sets some good reference values with good explanations for them. That said, it looks like a good resource.

Thanks. I will check those posts out!

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

    /**********************************
    TWO COLUMN LAYOUT for Contact page
    **********************************/
  #primary{
    width:50%;
    float:left;
  }

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

/******************************************
 PAGE:PORTFOLIO (This makes 3 photos per row)
*******************************************/
#gallery li{
  width:28.3333%;}

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

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

That's the first media query with the associated code.

Below is the second media query:

@media screen and (min-width:660px){
/**********************************
 HEADER
**********************************/
  nav{
    background:none;
    float:right;
    font-size:1.125em;
    margin-right:5%;
    margin-top:120px;
    text-align:right;
    width:45%;
  }

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

  h1{
    font-size:2.0em;
  }

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

  header{

border-bottom:5px solid #d77000;
    margin-bottom:60px;
  }



}

Could it be something incorrectly selected in the main.css document that precedes this code?

Thanks for the help!

Tobi Ogunnaike, thanks for sharing your code. I think I know what's going on and I updated my answer to include my new thoughts.

That's interesting because our teacher taught us to design first with the mobile first approach (like you said) yet he set two media queries (one at 480px for mobile devices and the other at 660px for larger screens)

However, his code works and mine doesn't.

How would you go about defining the 2 column layout as the default, unconditional style?

If you view my about page in a mobile view, the the text is to the right of the image i.e. 2 column view instead of a single column view. Any tips on sorting that out? Thanks

Oh that's right (it's been a little while since I watched the video), so what they do that case is to have the mobile view (the two column layout) applied in the most general media query and then use more limited conditions to override the mobile view with styles for larger screens.

What I was suggesting (which is may be a misunderstanding of Mobile First on my part) would be to specify the two column layout outside of any media query with the intention of overriding it with subsequent media query rules that apply to non-mobile views.

The other problem you mention with the About page is something that I struggle with, as well. My suggestion would be to inspect the paragraph and check your CSS to see if the styles you think should be applied are actually taking effect. Just scanning your CSS, I didn't see anything that would be relevant, but I might have missed something. I want to ask, "why do you think the text shouldn't be to the right of the image?", but that comes across more hostile that I mean. What I'm looking for is what rules you think should apply to the elements on that page because apparently your browser disagrees with you so we need to figure out why that is.

I would put the three column layout code inside a media query with a condition that a small screen can't satisfy such as min-width: 1024px;. After all, you aren't necessarily trying to rule out a three column layout on small screens, you're trying to balance two presentational styles to get the best appearance in a smaller screen and avoid wasted space in a larger screen.

With regards to your other problem, I would be interested in a link to the post that helped you or if you could explain how that code solves the problem you were having. This touches a part of CSS that I have a hard time understanding so I am really asking for my benefit.