Quiz

1. I'm still a little confused about absolute and relative positioning (for example, how to move the caption to the top of the photo in the assignment). Could we go over that in class? Thanks!

   I'm happy to revisit the grid example from the reading.

2. In homework instructions, it is said that "figure caption elements should have a background color that is 50% transparent yellow" and that it. But in the grading section, it is mentioned that 10 points are given if background of figure captions is opaque white figure captions have a 1 px black border. I am wondering which rule we should follow.

   I've updated the rubric.

3. I was confused as to why the answer for question 2 is B. Wouldn't it be C because the content would be different depending on the size of the device. So if you had a desktop device where the content was in horizontal columns like in A3, the content would be different from the mobile device since it would be vertical like the shrunken version of A3.

   By "content", I meant the information on the page. Recall that HTML is the province of content and structure, while CSS is presentation and style.

   If someone were reading the page to you, the content is the same whether the layout is vertical or horizontal.

   Apparently, this question was tricky for lots of you (though it hasn't been in the past). It's not my intention to write tricky questions, so I'll have to think about this.

4. Why do you use min-width for less than a certain width? It's a little counterintuitive because minimum width feels like greater or equals to.

   You're right! We *do* want greater-than-or-equal-to. We have most of the CSS for narrower devices (mobile first), and only if the device is greater-than-or-equal to some magic breakpoint, do we override with different rules for larger devices.

5. can you go over min-width measurements, how do you know what values to use (600 vs 768)?

   Those are based on the sizes of common devices (iphones, ipads, imacs, imonitors, ijumbotrons) oh, and non-Apple devices, too.

6. Why does the media query have @ in the selector?

   Presumably they wanted something that wouldn't easily be confused with tags, classes, ids and other selector syntax.

7. Please could we do a practical example in class of using the media queries?

   Sure. Let's look at the NY Times using the dev tools

8. can we do a demo in class on how to use media queries

   We'll see it in Ottergram. We could look at the NYTimes site, though it was not written for human readability.

9. how to modify CSS rules for different types of media

   Sure. The CS 204 website has some rules for print media

10. Are there any other major uses for media queries not mentioned in the reading?

    Not that I know of, but there's a lot I don't know.

11. I don't really have any. Thanks! / No Q's so far. I think it's cool that we can do all sorts of different things with CSS though!

    Then let's get to it!