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

in today's very very busy world people
are using all sorts of devices that have
different resolutions you have people
using desktops laptops tablets and
mobile phones and basically what this
means is your webpage has to fit on all
these devices or people will go to
another website so you want to make sure
that your webpage is a one size fits all
and you can do that with CSS media
queries this is one of the very very
powerful features in CSS and so I'm
going to show you how to use that today
now right now I have this on a desktop
and it's at max resolution this is I
think was nine hundred and sixty-four
pixels or something but what happens if
I minimize this and I start to go ahead
and resize the window well take a look
at that you can see here that the main
content page is starting to disappear
and now we just have the sidebar well
what we want to do is resize this
appropriately when the browser is
minimized or perhaps they're looking at
this on another device perhaps a tablet
so what CSS media queries allows you to
do is it basically allows you to resize
your entire webpage you can do pretty
much anything you want you could even
put up new content if you wanted but a
lot of times you're just going to be
deciding which elements you want to
display with this smaller pixel count
and in this case we probably don't want
to show the sidebar you always at a
minimum want to show your main content
panel and so that's what we're going to
do once this is displayed in a smaller
resolution we're going to go ahead and
eliminate the sidebar and just show the
main content and again we can do that
with media queries and of course this is
the same webpage we used in the last
lecture so again what we're going to do
is go ahead and get rid of the sidebar
so here is the syntax for media queries
you always use an @ sign then media and
then this actually takes arguments and
we'll get to that in a moment and then
it's just similar to other CSS rules we
need squiggly brackets now inside these
squiggly brackets we place all the
elements that we want to alter but first
let's go ahead and put in our argument
now this is where you specify the
resolution so in this case we're going
to specify the max width property
there's other properties and we'll talk
about that in future videos but for now
we're going to use probably the most
widely used one and that is max width
and what
we're going to do is specify 600 pixels
now what this basically means is is if
our web page is displayed on anything
less than 600 pixels we'll go ahead and
do whatever it is you tell CSS to do
with inside of these squiggly brackets
in this case again we want to go ahead
and get rid of the sidebar so that's
what this means basically this means
anything less than 600 pixels go ahead
and redo the web page whatever directive
we issue and 600 pixels actually usually
is the standard size of tablets so this
will handle tablets as well as when the
user minimizes the browser so let's go
ahead and put in a rules and it's just
like any other CSS rule so we'll specify
sidebar and of course we have a class
for that so we specify dot sidebar and
then we need squiggly brackets for that
right so let's go ahead and put that in
right here and then what we want to
basically do is hide the sidebar so what
we're going to do is do display remember
that property and we're going to set
that to none that will basically
completely obliterate the sidebar or get
rid of it
so let's see if this works let's go
ahead and save this and we'll go back to
our web page let's refresh this and
let's go ahead and minimize this and
take a look at that it worked
look it's going and see how nicely that
fits now very very nice indeed
you have your main content on here and
you don't have to worry about cluttering
the page with elements that really
aren't needed now we can do many other
things too you can basically do anything
you want you could add do elements if
you want we could actually move this
logo and in fact let's do that because
see how the logo didn't move so let's
actually float the logo left and so
we'll go back to CSS media queries and
let's put in a rule for that but you
know we probably should actually give
that an ID because we don't want to move
all of our images so let's go to where
our logo is just right here and let's
just give this an ID of test1 and then
let's go ahead and put in the rule for
it and of course since this is an ID we
need the hash sign and then we just
specify our ID which of course is test1
and what we're going to do is just float
this left now
and you take a look at this we're
keeping all these rules inside of our
main media query rule so let's go ahead
and save this and you know what I need
to actually save the index.html as well
because we put in an ID right here there
we go and let's go ahead and refresh our
webpage and let's see if this works now
take a look at that it moved left and
our sidebar of course is gone and
everything is working so that is how
media queries works okay as always
thanks for watching