CSS Layout Tutorial - 21 - Media queries Part 2 Video Lecture - Learn CSS

in this video we are going to continue
on with media queries and we're going to
add multiple media queries in this video
and basically what we're going to do is
add another media query to handle when
the screen or a device of 400 pixels or
smaller is used for our web page and
what we're going to do is just change
the color of this box to dark green so
let's go ahead and switch back to our
CSS code now as I said you can add
multiple media queries for as many
different resolution types as you want
so let's go ahead and just copy and
paste this because we're going to make a
new media query and we'll just go right
down here and we're going to make this 4
400 pixels that should handle some
smaller resolutions that encompass
mobile phones so 400 pixels and what
we're to do is we're going to go ahead
and just get rid of this rule here we
don't need that anymore because we
already floated the item up here and got
rid of the sidebar these rules will
remain in effect because we're still
smaller than 600 pixels but when we get
smaller than 400 pixels we want to go
ahead and change this box over here here
it is we used an ID of box so let's go
ahead and put that in here so we're just
going to specify pound box there we go
and then we're just going to change the
background color as I said so we need
the background color property and we're
going to set this to dark green so let's
go ahead and save this and let's see
what we get so we'll refresh our page
and let's go ahead and start minimizing
our browser so there you can see we hit
the 600 pixel mark and of course our
sidebar is eliminated and our logo has
been moved left let's go further and
there you can see take a look once we
hit the 400 pixel resolution the box now
changes to dark green now the key point
here is anything in this smallest
resolution type right here this 400
pixels resolution any properties that we
put in here will override anything we
put in here and to hammer home this
point let's go ahead and just copy and
paste this into our 600 pixel resolution
up here and what we're going to do is go
ahead and specify dark red and I'm going
to go ahead and save this now I want you
to notice it shouldn't change right this
will not change because
we are under 400 pixels so this
background color will take effect so
that's what happens if you're using the
same property in multiple media queries
so let's go ahead and refresh this and
this should stay the same and it did now
watch what happens when we move a little
bit further out yep see now the red will
take into effect because we hit the 600
pixel mark and if we go even further out
yep it'll default back to its original
color which of course is dark grey so
that's basically how the overrides work
with CSS media queries now we have used
the max width property now basically you
want to use this when you're designing
from the top down that is you're
designing from the desktop view and
you're moving down into smaller
resolutions all the way down to the
mobile phone now there is another
property called the minimum width now
we're not going to use that here but you
can go ahead and play around with this
it's the same concept you're just going
in a different direction you're actually
moving up now basically when you use the
minimum width property you're actually
doing the opposite here you want to
design from the mobile phone resolutions
and work your way up all the way to the
desktop so that's why you would use the
minimum width property other than that
everything is the same is just the
opposite of the max width so that is how
media queries works we're going to also
continue on with media queries in the
next video and it we're actually going
to create an entire new style sheet
using media queries and we will talk
about that again in the next video so
you guys