CSS – Media Queries & Viewport | Beginner’s Course

00:00:01 welcome back to our beginners guide two
00:00:03 videos left for the CSS part of the
00:00:06 series in this video it's time to talk
00:00:08 about the viewport meta tag and about
00:00:11 media queries because we want to make
00:00:13 our site a little bit more responsive
00:00:20 before we dive into the basics of
00:00:23 responsive design let me fix one mistake
00:00:26 I did in the last video because right
00:00:28 here with our fallback for the font size
00:00:31 of our page title
00:00:32 I added 16 pixels well if one Ram is 16
00:00:37 pixels then – Ram shouldn't be 60 but 32
00:00:40 pixels just to make sure that this is
00:00:43 correct now back to our website and now
00:00:46 back to responsive design and before we
00:00:49 dive deeper
00:00:50 let me change one thing because at the
00:00:53 moment I'm viewing this website right
00:00:56 here with a zoom level of 200% just to
00:00:59 make sure that you can see all the
00:01:01 details the problem is that we will work
00:01:03 a lot with our page width in that video
00:01:05 and because of the zoom level of 200%
00:01:08 this would mean that a width of 1000
00:01:12 pixels right here would be a width of
00:01:15 500 pixels in our code and I think this
00:01:18 can be confusing therefore I'll reduce
00:01:21 the zoom level right here to 100% so
00:01:25 basically I won't have any zoom in here
00:01:28 and with that we can make sure that the
00:01:31 pixels we can see right here for our
00:01:33 page width are equal to the pixels that
00:01:35 we have in our code now that we talked
00:01:38 about that we can see that we already
00:01:40 have kind of a responsive design we can
00:01:44 see that down here in the footer right
00:01:46 here we see that the way the images and
00:01:48 the text is displayed changes that
00:01:50 simply due to our flex box that we
00:01:54 implemented because we here if our
00:01:56 display flex a declaration with the Flex
00:01:59 wrap and the wrap value applied and we
00:02:03 have a word 50 fine for 150 pixels for
00:02:06 the images and 450 pixels for the text
00:02:10 this means as soon as we are below these
00:02:13 values the way the content is displayed
00:02:16 changes to this part we got another well
00:02:19 kind of responsive design already appear
00:02:21 for our images also because as you can
00:02:24 see as soon as we are below here is 400
00:02:28 pixels can you see it right here so 400
00:02:31 right here and if we go below that
00:02:34 then the way these images are displayed
00:02:36 also changes this is you to our flex box
00:02:41 also which we applied right here so
00:02:42 display flex flex wrap and we defined a
00:02:45 width of 50% but additionally a minimum
00:02:50 width of 200 pixels therefore if we
00:02:53 reduce the weight of our page below 400
00:02:56 well there is not enough space for two
00:02:58 images with 200 pixels of width for each
00:03:01 therefore it is displayed like that with
00:03:04 a wrap so this is what our let's call it
00:03:06 responsive design looks like at the
00:03:09 moment in our desktop view that's really
00:03:13 important because at the moment we are
00:03:15 just playing around with the width in
00:03:16 our desktop browser the problem is that
00:03:19 well this behavior right here cannot be
00:03:23 observed if we have a look at our mobile
00:03:25 browser or at least at the simulated
00:03:28 mobile browser because if we increase
00:03:30 the size maybe and now click right here
00:03:32 in the chrome developer tools we can see
00:03:35 that we can increase that more even we
00:03:39 can select different devices let me
00:03:41 maybe select an iPhone 8 right here and
00:03:43 as you can see right here well although
00:03:46 we have a width of only 375 pixels which
00:03:51 would be below these 400 pixels 2 times
00:03:54 200 for the width of the images that we
00:03:57 defined the site is still squeezed into
00:04:01 that mobile phone screen in the desktop
00:04:04 view the reason for that is that our
00:04:07 mobile browser is not aware of the
00:04:10 actual device width of our device and
00:04:13 therefore doesn't adjust the viewport to
00:04:15 that size and because of that our site
00:04:18 looks like this and doesn't look like
00:04:21 that on our mobile phone because we
00:04:24 should actually expect that with a width
00:04:27 of 375 pixels it's 373 now but basically
00:04:32 it should look like that actually and as
00:04:34 I said this is you to the fact that the
00:04:37 mobile browser is not aware of the
00:04:40 device width and cannot adjust the
00:04:42 viewport according to that the good news
00:04:45 is that we can easily adjust that by

00:04:47 simply going
00:04:48 to our code at this time to the
00:04:50 index.html file and now add a specific
00:04:53 meta tag it's called meta name now it's
00:04:58 interesting it's viewport so that's the
00:05:01 first step now we need to refine one
00:05:04 more thing and this second thing is the
00:05:07 content which should be equal to width
00:05:11 equals device width like that now what
00:05:17 did we write right here
00:05:18 well basically what I just talked about
00:05:20 with that we tell our browser that the
00:05:24 viewport should be equal to the width
00:05:27 right here of the device we are using so
00:05:31 if we save that and go back to our page
00:05:33 and reload it we can now see that our
00:05:37 mobile browser is now able to identify
00:05:40 the actual device width of our iPhone 8
00:05:43 right here which is 375 pixels well and
00:05:47 then the browser knows that he should
00:05:49 keep a minimum width of 200 pixels for
00:05:53 each of these pictures well and because
00:05:55 of that he knows that he has to switch
00:05:57 the view to that view that we defined so
00:05:59 far in our basic responsive design this
00:06:02 is really important always make sure to
00:06:05 add this meta tag with the viewport and
00:06:07 content width equals device wood to your
00:06:11 HTML file there are more things you
00:06:13 could specify right here but we'll just
00:06:16 focus on three basics in this video well
00:06:19 and with that if we go back to the
00:06:21 desktop view we can see that we have a
00:06:23 really good responsive design now on our
00:06:26 website that's not true of course this
00:06:29 was just a starting point actually
00:06:31 because with that we now make sure that
00:06:33 our browser is aware of the device size
00:06:36 and adjust uh viewport according to that
00:06:39 now we have to work with this
00:06:41 information and think about the
00:06:42 consequences and this means we cannot
00:06:45 specify what should happen to the way
00:06:47 our website is displayed depending on
00:06:50 specific well borders we can specify we
00:06:53 could for example say that as soon as
00:06:55 our device has a width of 400 pixels or
00:06:58 more then the way our elements are
00:07:00 positioned should
00:07:01 change or the font size should change
00:07:03 for example basically you can change
00:07:06 almost any property now and you can
00:07:08 change these properties depending on the
00:07:11 device size by using media queries now
00:07:14 this can sound really complicated and
00:07:16 confusing now therefore as always let's
00:07:19 think about that step by step and before
00:07:22 we think about that I have to admit that
00:07:25 we made a mistake right here no worries
00:07:27 the site is totally fine no big issue
00:07:30 but the way we developed this website is
00:07:33 actually not according to the standards
00:07:35 nowadays because as we have a lot of
00:07:37 different devices on the market well one
00:07:39 of the most important devices is of
00:07:41 course the mobile phone therefore
00:07:43 normally developing a website should
00:07:45 always work with the general rule of
00:07:47 mobile first so you start building your
00:07:50 website based on the way it should look
00:07:52 like on the mobile phone and then you
00:07:55 think about how the site should adjust
00:07:56 as soon as you have bigger devices the
00:07:59 good news is that we can do this now by
00:08:02 working with media queries so let's dive
00:08:04 into that and as I just said we want to
00:08:06 work mobile first now to make our site
00:08:09 responsive and because of that we should
00:08:12 think about the smallest device size we
00:08:14 want to build our website for let's say
00:08:18 that this could be 300 pixels so right
00:08:21 here write 301 I think this is fine but
00:08:25 let's say 300 pixels should be the
00:08:28 smallest device so this is our starting
00:08:31 point but we want to develop our website
00:08:33 for and at the moment it doesn't look
00:08:35 good right here
00:08:36 so this means we have to go back to our
00:08:38 code because that's important keep that
00:08:40 in mind with the mobile first approach
00:08:42 this is now the code that is responsible
00:08:45 to make sure that this page is displayed
00:08:47 correctly and this means we have to
00:08:49 change some things the first thing we
00:08:52 should change is maybe the width of
00:08:54 these images because as we can see right
00:08:56 here these are too small so we can't get
00:08:59 rid of that minimum width right here now
00:09:01 and say that the width should be 100%
00:09:05 for our images like that yeah now this

00:09:09 looks better
00:09:10 however I still think that the home and
00:09:13 contact buttons right here don't
00:09:15 good because the font of home in contact
00:09:18 or the font size is a little bit too big
00:09:20 so we should also work on that
00:09:23 let's see this is the navigation so we
00:09:26 have to work in the or on the navigation
00:09:28 class so let's go back go to navigation
00:09:31 and to the navigation list items to be
00:09:34 more precise and let's maybe change the
00:09:37 font size to 0.9 remm something like
00:09:40 that and let's reload the page yeah and
00:09:43 with that as I said at the beginning I'm
00:09:46 sorry I hope you can see it now but I
00:09:47 have to keep it that small as you can
00:09:49 see now our website now has a good look
00:09:53 actually on this really small device the
00:09:56 issue still is that we have this massive
00:09:59 City trip and this is the California
00:10:01 landscape text right here and I think
00:10:03 this should not be displayed on such a
00:10:05 small device so let's say we don't want
00:10:07 to display this information right here
00:10:09 on our really small device we can also
00:10:13 change that by I know I forgot the part
00:10:15 to be honest I think it's the main part
00:10:18 right here and the trip text class
00:10:21 that's it so let's go to trip text right
00:10:25 here
00:10:25 and let's now comment out all that part
00:10:29 because we will need it later for the
00:10:31 media queries so if we now say if then
00:10:34 go back to our website and reload it
00:10:36 yeah we can see with the left that text
00:10:39 in here so let's add trip text right
00:10:44 here and now simply say display:none
00:10:48 therefore we now made sure if you load
00:10:51 the page that it is not displayed right
00:10:53 here so with that we now if our base set
00:10:57 so we have the mobile first approach for
00:10:59 our smallest device and I think until
00:11:01 right here it looks good but for example
00:11:05 you could now say that you would like to
00:11:07 change the way the website is displayed
00:11:09 right here at 400 pixels let's say you
00:11:12 want to increase the size of these home
00:11:14 and context buttons of the font and this
00:11:18 can now easily be done by using media
00:11:21 queries so let's go back to our code and
00:11:23 let's now add such a media query and I
00:11:26 normally add this Curie's at the bottom
00:11:29 of the
00:11:29 yes s-code because of that you can
00:11:32 easily see and immediately see what type
00:11:34 of media queries were applied and the
00:11:36 media query is simply written like that
00:11:38 so add media make sure to check out the
00:11:41 mdn I added a link in the video
00:11:44 description because you can specify well
00:11:46 specific media where this should only
00:11:48 apply to you in our case at media simply
00:11:51 means in general that from whatever
00:11:54 medium you access this website from this
00:11:57 media query will be applied if that's
00:12:00 naughty if if the min-width so the
00:12:05 device width is 400 pixels as we just
00:12:11 said we can add curly braces right here
00:12:13 and now we have to specify what should
00:12:16 happen so what happens if we have a look
00:12:19 at our website with a device that has a
00:12:21 minimum width or a width of at least 400
00:12:24 pixels we said that we want to change
00:12:27 the font size of the navigation items so
00:12:31 this navigation Li right here so what we
00:12:34 can now simply do is we cannot simply
00:12:36 select everything copy it now paste it
00:12:40 right here and now get rid of all the
00:12:43 properties that should not change that's
00:12:46 really important because we only want to
00:12:48 change a specific property in this media
00:12:50 query in our case this is the font size
00:12:53 now we could also adjust the fallback
00:12:55 for the simplicity of this tutorial I
00:12:58 will not adjust it now but you could
00:13:00 also do that of course but I will just
00:13:02 stick to the font size which could now
00:13:05 be let's say
00:13:07 1.2 m like that if we save that and go
00:13:11 back to our website and reload it can
00:13:14 you see it the font size now increased
00:13:17 because if we decrease the size it jumps
00:13:20 back to our initial size and as soon as
00:13:23 we hit that border we can see that our
00:13:26 font size adjusts according to the new
00:13:29 font size that we defined with that
00:13:32 media query and that's really important
00:13:34 to keep in mind with that media query
00:13:36 you can start building your website
00:13:37 mobile first so just as we did it now we

00:13:40 just had a look at the smallest device
00:13:42 we want to
00:13:43 our website for and then you specify
00:13:46 media queries for certain breaking
00:13:49 points for example in our case the min
00:13:51 width of 400 pixels and then only
00:13:54 specify the properties of specific
00:13:58 selectors elements classes anything like
00:14:00 that and define what should happen as
00:14:03 soon as this case is true now of course
00:14:06 there's not only min width available you
00:14:09 could also use max width for example
00:14:11 again have a look at the link I provide
00:14:13 in the below description to the MDM but
00:14:16 from a mobile first starting point this
00:14:18 is probably the easiest way to start
00:14:20 with just start with the smallest device
00:14:22 and then use min width to adjust the way
00:14:25 your website looks depending on the
00:14:27 device size however we are not done yet
00:14:30 because so far we can see that our
00:14:33 website looks fine right here but I
00:14:35 think as soon as we hit maybe 500 pixels
00:14:40 or let's maybe check it out let's have a
00:14:42 look at a specific device let's make it
00:14:44 bigger let's see what an iPad looks like
00:14:47 yeah I think for example on an iPad our
00:14:51 website could be viewed in the desktop
00:14:54 view so we could not also specify that
00:14:56 let's maybe say as soon as we have a
00:14:59 minimum width of 700 pixels our website
00:15:02 should change back to the normal desktop
00:15:05 view so basically to the view we had in
00:15:07 the beginning because right now as you
00:15:09 can see we only have our mobile view
00:15:12 right here and I don't think this looks
00:15:14 really good on a desktop device so let's
00:15:17 reduce the size and let's go back to our
00:15:20 code and let's now simply add another
00:15:24 media query so you can just copy that
00:15:26 right here and now say that now the main
00:15:30 width is 700 pixels and now really
00:15:34 important just take the trip images
00:15:38 right here so this width you can copy
00:15:41 everything actually copy down paste it
00:15:45 right here don't forget to close the
00:15:47 curly braces of the media aquarium and
00:15:49 now you want to say that well as soon as
00:15:52 our device has a minimum width of 7
00:15:54 three pixels well our we don't need to
00:15:57 hide by the way get rid of that our
00:15:59 width should not be 100% anymore but it
00:16:03 should be 50% like that if we go back to
00:16:07 our website and reload it well we can
00:16:11 see that as soon as we hit 700 pixels
00:16:14 right here the way our site is displayed
00:16:18 changes and again based on that media
00:16:20 query so you can see for our initial
00:16:22 site right here we have the normal
00:16:24 viewer then we have the 400 pixels where
00:16:28 the home and contact font size increases
00:16:31 and then we have our 700 pixels there
00:16:35 suddenly the entire look of our website
00:16:38 changes now there is one thing we forgot
00:16:40 right
00:16:40 we had these headers right here let's
00:16:43 also add these that's why I commented
00:16:45 them out right here because if we now
00:16:48 simply cut these out from here and now
00:16:53 add them to our media query as you can
00:16:56 see you can also combine different
00:16:58 selectors in here and get rid of the
00:17:02 commented out part like this just some
00:17:06 basic formatting right here and like
00:17:10 that maybe and also get rid of right
00:17:12 here and put it right there so that it
00:17:15 looks nice
00:17:16 well we add line right here well and
00:17:19 then with this code being added this
00:17:21 simply means that as soon as our device
00:17:24 has a width of at least 700 pixels well
00:17:26 this should all be true now let's see if
00:17:29 that happens
00:17:30 so we reload the page and indeed now we
00:17:34 can see that our massive City trip and
00:17:36 the California landscape text is back
00:17:38 again
00:17:38 and if we reduce the size can you see it
00:17:42 it switches to our mobile view and if we
00:17:45 reduce it further the font size
00:17:46 decreases and with Dada
00:17:49 can you see it we basically have a nice
00:17:53 responsive design as I would say not a
00:17:56 really sophisticated one of course but I
00:17:58 think for the basic steps we applied
00:18:00 this is really awesome you can also
00:18:02 switch to the different mobile devices
00:18:03 right here so the iPad has the best of
00:18:05 you so has the iPad pro
00:18:08 but on the iPhone X for example we have

00:18:11 the mobile view and so do we have it on
00:18:13 the galaxy s5 and on all the other
00:18:16 devices that we have right here so this
00:18:19 is quite cool actually as I think and as
00:18:22 you could see it it was really easy to
00:18:24 implement there are only two things that
00:18:27 you have to keep in mind the first thing
00:18:29 is always add the viewport meta tag
00:18:33 right here we talked about that with
00:18:35 that you basically explain your mobile
00:18:38 browser that your device has a certain
00:18:40 width and that if you port should be
00:18:43 adjusted according to that with with
00:18:45 that basic information in mind or stored
00:18:48 for the browser we can then work on the
00:18:50 media queries and add these curious down
00:18:53 here for specific device sizes
00:18:56 additionally keep in mind that if you
00:18:58 build mobile first the entire code you
00:19:00 have right here should refer to your
00:19:03 mobile so to the smallest device you
00:19:05 want to create your code for and in the
00:19:07 combination with the media queries down
00:19:09 here you can then tailor specific
00:19:11 properties according to the needs that
00:19:14 you have on the bigger devices that you
00:19:16 may have and with that we now actually
00:19:19 also have our first responsive design
00:19:22 implemented now as I said in the
00:19:24 beginning we have two videos left for
00:19:27 our CSS part of the series this was
00:19:30 video one in the second video so in the
00:19:32 next video we will then clean up our
00:19:35 website a little bit because we might
00:19:37 want to work on some foreign sizing
00:19:39 topics maybe or we could also work on
00:19:42 the contact page because right now well
00:19:44 I don't think this looks really cool so
00:19:47 as always I can only say thanks a lot
00:19:50 for watching and I hope to see you in
00:19:51 the next video bye

You may also like