CSS Layout Tutorial - 23 - Media queries Part 4 Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

okay this is going to be the final video
on CSS media queries but I wanted to
cover a couple of more things that you
can do in CSS media queries now we're
going to use the code that we used two
lectures ago and part two of media
queries so basically in the last lecture
we added a different style sheet in this
lecture again we're just going to go
ahead and use the code that we used
right before that lecture and you will
remember that we added two media queries
one to handle a 600 pixel resolution and
another one to handle this 400 pixel
resolution and let's just make sure that
is still working so let's go ahead and
minimize our browser there you can see
yes both are working just fine
good so let's go back to the code now
you might ask well what if I only want
to display this for mobile phones and
tablets what if I don't want this
situation to occur with the desktop
browser what if I only want to apply
this to mobile phones well we can
actually specify a device type and it's
very very simple actually we only need
two keywords and we're going to add it
right after media so we put in here only
screen and what this means is basically
only display this for mobile devices so
this will only get applied now for
mobile devices and so basically any user
that is on a desktop PC and is browsing
your website they will not be affected
by these media queries so let's go ahead
and we'll place this down here as well
and let's go ahead and save our page and
let's go back to our browser and we will
refresh our page and then let's minimize
this now if this works
none of those media queries should be
applied we should see absolutely no
changes here and look it worked
nothing was applied so I don't have a
mobile phone here obviously to test this
but basically if you wanted to load this
page up on a mobile phone it should only
display those resolutions so that's the
way that works you can do it strictly by
device all right let's minimize this now
there is one final thing I would like to
show you and basically what you can do
is you can specify a range so you could
say hey between 300 and 600 pixels I
want to go ahead and rearrange the page
or alter the elements and you can
seht arranged now what we're going to do
here is I'm just going to go ahead and
copy and paste it because I have this
all typed out I just don't feel like
typing it out again so we're just going
to go ahead and get rid of all of our
media queries and then I'm just going to
copy and paste everything into here and
here it is take a look now what we're
doing is we're specifying a minimum
width right here which is 400 pixels and
then I'm using the and keyword and then
I'm specifying a max width and so this
gives you a range if you want to
actually work between a specific range
you can do that and then I just
basically applied some of the same CSS
rules we've been using in the previous
lectures I got rid of the sidebar I got
rid of the nav bar we're going to go
ahead and float our logo to the left and
we're going to make the background color
of the Box dark red and so let's go
ahead and save this and let's make sure
it works now so we'll go back to our web
page and we'll hit refresh and let's go
ahead and I'm going to minimize this and
watch what happens now watch what
happens when we hit the 600 pixel mark
okay there we just hit the 600 pixel
mark and look the web page is back to
its original form
or so we're under 400 pixels and so
media queries is no longer taking effect
see how that works we had a little range
there that's how that works okay that is
going to do it for this video and as
always I hope you found this useful
thank you