Responsive Media Queries - Where do i put what code?

Question

This will be my first fully responsive site, so I've looked around and found the basic media queries at the bottom of the post, which seems to match most devices in some way or form. I started off the code outside of any of these queries (i.e. targeting the average desktop). Then I worked on the first media query for mobile, but the second rule doesn't make sense to me (i.e. everything bigger than 321px). It seems to mean everything bigger than 321 up to 768 which is the next rule. I think I'm misunderstanding how this is intended to work? Can anyone perhaps explain this in a simple enough way? I'm starting to think that all my CSS code should be inside on of these media queries and that I should haven't started with the mobile version first, then expand it gradually as the resolution gets bigger? ``` /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) and (orientat…

Accepted Answer

The purpose of media queries is to alter elements so they look good a specific window/screen size. Mobile First design is beginning to become popular. Essentially, the developer creates the website to be optimized(looks and acts best) on mobile devices. Next, he gradually inserts media queries at the end of his css to overwrite the original css. He does this so that the page adjusts to the user's window/screen size, thus resulting in a better experience.

Here is an example:

```
.ImageGalleryItems {
  float: none;
  clear: both;
  background-color: black;
}
@media only screen and (min-width: 768px) {
  float: left;
  background-color: white;
}
```

Now, whenever the user's screen size is larger than 768px, the image items will float left rather than display next to each other. Also, the background color will change.

This is the principle you can use. If you develop for mobile first, don't add `:hover` effects in your original css because those are not employed for mobile devices. Then, use media queries to add in those effects for desktop. This saves data usage and creates cleaner code.

Responsive Media Queries - Where do i put what code?

Solution

Problem