suggestions and some tips

[mkruijt]

Hi Jason,
I've made some changes, please compare what I've done to your homework you handed in.

I think you made a minor think mistake. first of all, css is interpreted top to bottom.
if you write
p{ color:red; }
and a couple of lines after (down) that:
p{ color:blue; }
the paragraph will be blue.

As I explained in class. the css you start writing is the css for mobile. Also this is your default styling. default because some of the styles will be applied througout all screens, mobile, tablet and desktop. for example, text color, background color and defining flex on an element.

this also means that these default styles do not need to be reapplied in your media queries.
media queries are meant to override default styles, not to repeat them. so if we go back to the previous example
/*default style*/ p{ font-style: italic; background: Alice Blue; color:red; }

/*tablet style*/ @media screen and (min-width:768px){ p{ color:blue; } }
what you see is that i just want to change the color of the text in the tablet (this is kind of a bad example because why on earth would you do that) but the point is that all styles (font-style and background) from the default styling still apply, and don't need to be declared again in the media query (you repeated your styles a couple of times).

also you turned the media queries around, so:

/deafult styles/

here you write everything that is mobile and define colors and fonts etc

/* tablet*/

i find it more logical to only write min width media queries.
so you can write:

@media screen and (min-width:768px){ //here you override some of the default styling, probably the width of flex-items etc. }
than you have the next step: desktop

@media screen and (min-width:1018px){ //here you override some of the default and tables styling, probably the width of flex-items maybe a change in appearance for the menu? }
Hope this makes sense. let me know if you have any questions