Quiz

This is more of a note than a question. I wasn't sure how to answer question 2. I think media queries are a way of changing the style of a webpage depending on the device it's viewed on and other characteristics like aspect ratio. I wasn't sure if that translates into B, C, or D. I thought C fit the best, although "content" is vague so I'm not sure.
The question was:
```
media queries

    A. allow you to override the normal HTML with different HTML

    B. allow you to override the normal CSS with different CSS

    C. allow you to have different content for different screen sizes

    D. none of the above
```
At the beginning of the course, we talked about three languages for three kinds of things:
1. HTML for content and structure. The words, pictures and other material of the page
2. CSS for style and presentation. What does the material look like?
3. JavaScript for behavior. How can we interact with the page, and dynamically change it.
The media queries allow us to change the CSS (option B), not the HTML (options A and C).
i'm confused about question wording for question 3, media queries allow you to format your content so the same content can appear in different screen sizes with just some css, right?

Right.
I noticed when resizing my browser window when viewing ottergram, there was a minimum size and I couldn't continue to make the window smaller. Is that determined in the code?

I think that's built into the browser or even the operating system. There are limits to how narrow Word and Excel can be, too.
is the media query just that one/two lines of code? can we add more and be more precise?
Yep, usually just a few lines, wrapped around a bunch of CSS. Like this:
```
@media screen and (min-width: 768px) {
    ...
}
```
How many different types of media queries are recommended? Just three- one for <600px, <768px, and everything larger than that?

Those are great choices.
Would we have to manually type in the "breakpoint" for the media queries if we are creating different CSS for every different type of screen?

Yes. It's part of the CSS file, like all the other rules.
more explanation about layout viewport vs. visual viewport
Yeah, this is hard to understand. Let's try that in Ottergram.
- Ottergram w/o meta. Turn on responsive design mode and look at it as an iPhone 11.
- Ottergram w/ meta. Turn on responsive design mode and look at it as an iPhone 11.
Could you give an example of this perhaps a visual reference: “ Many mobile browsers start with the visual viewport all zoomed out, so you can see the whole page, but can't read anything without zooming in.”

this is related to the META tag. It zooms out so that all the pixels fit on the mobile browser.
Should viewport and media queries both exist to get the code work? What are their functions respectively?

We could omit both and require the user to zoom. But that's annoying.
We could add the META viewport stuff to get things to match better.
We can optionally add media queries to change the layout if we have more room.
For devices like the foldable phones or reading messages on apple watch, are they using the same media queries code adjusted according to size ?

Yes, I think so.

Can you explain why the order of the thumbnail-list should be 0 here?



@media screen and (min-width: 768px) {
  main {
    flex-direction: row;
    overflow: hidden;
  }

  .thumbnail-list {
    flex-direction: column;
    order: 0;
    margin-left: 2em;
  }

  .thumbnail-item {
    max-width: 260px;
  }

  .thumbnail-item + .thumbnail-item {
    margin-top: 2em;
  }
}

Because in the default CSS, the .thumbnail-list had order: 2

Here, we want to override that earlier CSS, putting it back to order: 0.

More about print styles

You could do anything, but typically we do things like (1) adjust color (red is just gray on a black and white printer), (2) omit background colors, (3) change fonts and sizes, (4) hide nav bars and hyperlinks that are useless on a printout