Coding

CSS – Media Queries & Viewport | Beginner’s Course | #12

  • 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