Up next in 10
Top 10 Advanced CSS Responsive Design Concepts You Should Know
806 views
Feb 7, 2024
Take your responsive design skills to the next level with this insightful tutorial on the "Top 10 Advanced CSS Responsive Design Concepts You Should Know." In this video, you'll explore cutting-edge techniques and strategies that go beyond the basics, empowering you to create highly adaptive and visually impressive web layouts. The tutorial covers essential concepts such as CSS Grid, Flexbox, media queries, and more, offering a comprehensive guide for developers looking to enhance their responsive design capabilities. Whether you're a seasoned web designer seeking to stay ahead of the curve or a developer aiming to create truly responsive and user-friendly interfaces, this guide provides valuable insights. Join this tutorial to master advanced CSS responsive design concepts and elevate your web development projects to new heights. Unleash the full potential of CSS for creating dynamic and visually stunning layouts that seamlessly adapt to various screen sizes.
View Video Transcript
0:00
Responsive design in CSS is incredibly important, and you may think if you understand media queries
0:05
you understand responsive design, but there are so much more to responsive design than just simple
0:10
media queries. In this video, I'm going to be covering about 10 different topics on how you
0:14
can improve your responsive design skills. Some of them are going to be related to media queries
0:18
but many of them aren't even using media queries at all. Welcome back to Web Dev Simplified. My name is Kyle, and my job is to simplify the web for you
0:29
so you can start building your dream project sooner. And to get started with this video, I'm going to cover some of the more simple concepts, and then towards the end, we're
0:35
going to talk about some of the more advanced concepts that don't even use media queries at all
0:39
Now, the very first responsive design concept you need to understand actually starts in your HTML
0:43
and that is this simple meta tag right here for your viewport. If I remove this line of code
0:49
my site on mobile is going to look very weird. So right now I'm using a mobile version of my
0:53
site, as you can see. And if I just remove this line of code and save, you'll see it looks like
0:58
everything's working just fine, but let's add in some text. Let's just say we're going to add in a bunch of text. Now you can see that my page scrolls horizontally, which is definitely not
1:05
ideal. And you've seen websites like this all the time. While if I just come in here and I bring
1:10
that line back in, add my text in, and I do a save now, you can see all of my text is fitting on the
1:16
page exactly as I expect. So what this line of code does, I'm essentially breaking it down
1:20
is it's saying that the width of your screen should be the same width as your device. So no
1:24
matter what size my screen is or what size my phone is, the width of my content is always going
1:29
to be the same as the width of my device. And this initial scale right here, it tells you what type
1:33
of zoom level you want to be at when you load in your page for the very first time. So let's change
1:38
this to three, for example. And all I'm going to do just to show what this would look like is I'm
1:42
going to toggle off mobile view and then toggle it back on. And now you can see my page is way
1:46
more zoomed in than before. It's three times zoomed in. If I change that back to one, and then I just
1:51
do a quick inspect real quick so I can get that back, toggle it off and back on. Now you can see
1:55
I'm back to one time zoom. So the reason we put this into our page is to make sure our width is
2:00
perfect and we make sure that we're not excessively zoomed in or zoomed out. So it's just defaulting
2:04
to a normal zoom level. Now, the next concept that I want to cover is going to be a concept
2:08
for media queries. So if we just come down here and I define a media query and this media query
2:12
I could say like men with 200 pixels, and then I could change my box to have a background of red
2:20
So now you can see, since we're above 200 pixels, the background is red. That's pretty
2:23
straightforward. Let's change it to like 500 pixels real quick. Now you can see that we have a purple background. And if we just inspect our page and we go back over into that mobile view
2:32
there we go. Now we can actually just move this around and you can see based on my screen size
2:36
my box is changing colors. Super straightforward. Everybody understands this, but something that
2:40
you may not know is you can actually do more than just check widths. For example, you can check
2:44
orientation inside of here. So if I just type in orientation, I could say landscape. And now
2:51
whenever I'm in the landscape orientation, so essentially my page is wider than it is tall
2:55
You can see the box turns to red and I could change this to portrait. There we go. And now
3:00
whenever my height is taller than my width, it's going to be that media query. So this is really
3:04
useful if you're on like a tablet or if you're on a phone, you can swap between portrait and
3:08
landscape. Or if you just want to determine which direction is wider, is it wider or is it taller
3:12
It's a really useful media query. Another really cool thing you can do is media queries on aspect
3:16
ratios. So I could say min aspect ratio is like one to one, for example. And now if I just give
3:23
this a quick save, when my aspect ratio here is above one to one, essentially my width is wider
3:27
than my height. That's what one to one is saying. You can see this box has changed to red. I could
3:31
also do something like 16 by nine. So once my width expands past that 16 by nine ratio, for
3:37
example, if I really shrink down the height here, you can see the box again, changes back to red
3:41
Now there's a ton of different stuff you can do in this media query. Another one is like prefers reduced motion. There's a bunch of preferences based on people's like motion preferences or data
3:49
preferences. Those don't really have to do as much with responsive design, but it's still important
3:53
to know because it's important to cater your website towards people that want things like high contrast colors or animations or lack thereof. Now, the next three concepts that I want to talk
4:01
about are all somewhat experimental with varying levels of browser support. I'll cover all the
4:05
different browser supports when we get to that point. But the very first one I want to talk about is how you can do ranges with CSS media queries. So normally you would write something like men
4:13
with 200 pixels, you know, or whatever it is, 300 pixels. And then based on our width, you can see
4:18
that our box is changing colors, but this is a little bit difficult for me to read personally
4:22
So I much prefer to do something along the lines of width is greater than or equal to 300 pixels
4:29
That is essentially going to do the exact same thing. Once our width is greater than or equal
4:33
to 300 pixels, our box is red and below that our box is purple, but this is much easier to read
4:37
So we have the ability to do greater than equal to greater than or equal to, we have less than
4:42
less than or equal to, and we even have equal to if you really want, but it almost serves no purpose
4:46
at all. And best of all is you can actually combine these together. So you could say like 100 pixels
4:51
is less than or equal to our width and our width is less than or equal to 300. So now we're between
4:55
100 and 300 pixels, you can see our box is that red color. And then when we're less than 100 or
5:00
above 300, it changes back to purple. Now as for browser support on this, let me just drag this
5:04
over. As you can see, the browser support is currently 71%. And the only browser we're waiting
5:09
on here is Safari, all the other browsers support it. So hopefully this will come in relatively soon
5:14
But if you don't want to wait, you can use a plugin like post CSS, they have the ability to do
5:17
these range syntaxes, and it'll just convert your CSS from the range syntax to the old syntax. And
5:23
it'll work exactly the same. And it'll work on all browsers. Now the next concept I want to talk
5:27
about has even better browser support, it's really almost entirely there. And that is container
5:31
queries, which is one of my favorite new features in CSS, I actually have a full video covering it
5:36
linked in the cards in description. But I'll give you a really short example of what it is. So let's
5:39
just come into our code. And let's just add in a simple sidebar. And inside that sidebar, let's add
5:44
a box and we can just get rid of this lorem ipsum text, we don't really need that right now. So we
5:48
can do just expand this out. So we can see what we're doing, we can create our sidebar. And for
5:52
our sidebar, let's just give it a width of 20%. And we're going to come in here and we're going
5:58
to give it a border on the left of 200 pixels. And then we want to make sure that our body here
6:03
is going to be a display of flex just so they're going to show up side by side. So we'll just say display flex just like that. So now our sidebar takes up 20% of the width of our screen. And what
6:12
we can do is we can just get rid of this mobile view. So things are a little bit easier to see
6:15
So it'll be a little bit wider. So let's just get rid of that. There we go. And we'll zoom our page
6:19
out a little bit. There we go. Now let me fix my border here. This should obviously be one pixel
6:23
solid black instead of that 200 pixels. There we go. So now we have our border on the left
6:27
or on the yeah, right there on the left. And let's also give our boxes a little bit of margin so we
6:31
can just see what they look like 20 pixels. There we go. So we have a box on the right hand side and
6:35
a box on the left hand side. And you can see that they're pretty big. We'll shrink them down a little
6:38
bit. Let's do 100 by 100. There we go. Now we have our two different boxes inside of our different
6:42
containers. Also, one last thing that we should probably do is we're going to wrap this normal box inside of some like main container. And then we can just come into our CSS, we can say dot main
6:52
flex grow one. There we go. Let's just say both of those. And now you can see this box on the left
6:58
hand side is filling up a lot of space in this box on the right hand side is pushing the side, we can make our sidebar a little bigger. Let's do like 30%. There we go. So we essentially have
7:04
our sidebar and our main content. Now this is fine when you just have like one page. But what
7:09
happens if you want to have a component in your main section like this purple box, and we want to
7:12
have a component in our sidebar section. And we want to change this component based on how much
7:16
space it has. Because if our screen is, for example, you know, really large like this
7:20
you can see that we have lots of space in the left, but not too much space on the right
7:24
So our media queries would all be for large screen sizes. But this component on the right
7:28
actually doesn't have that much space. So we want to be able to say how much space does this have
7:31
inside of its container and size it or change it based on that. So what we're going to do is
7:36
instead of using a media query, because for example, I could say like media query width
7:40
is greater than or equal to, let's say 600 pixels. So when we're larger than 600 pixels
7:45
our boxes are going to be red. So if we expand this, you can see once we get to this point, our boxes both turn red. Let's say this red styling was like adding additional content
7:53
Well, on this right-hand side, there's not enough space for that additional content, but it's still showing up as red in our scenario because our whole page is larger than 600 pixels
8:02
Instead, we can change this to an at container query. And this right here is going to say
8:06
use the container you're inside of to determine your actual width. Then all that we need to do
8:10
is we need to tell our boxes or our container query what the container is. So we have our
8:15
main container and our sidebar. These are both our containers. So we can just say that the
8:19
container type for these is going to be an inline size. Now, if I give that a quick save and I
8:24
change this to something like, let's say 400 pixels, you can see this left-hand section
8:27
this main content is larger than 400 pixels. So it shows up as red while this box over here
8:32
isn't a container that's less than 400 pixels. So you can see it shows as purple still. And once
8:37
our entire page shrinks down where the main content is also less than 400 pixels, you can
8:41
see that changes to purple. This is really useful, especially when you're using like component-based
8:45
libraries like react. And again, I'd highly recommend you check out the full video of me
8:49
covering this because there's so much more than just what I'm covering here. Now, as for browser support, it's surprisingly good. You may see this number of 73% and think that's not that great
8:58
but if you look here, it's actually supported in every single main browser. And even Firefox
9:02
just rolled out support for this very recently in the newest version. So just given a little bit of
9:06
time, maybe a couple months, hopefully this will be, you know, up to like 90% support because it'll
9:11
be in every browser. You can just see here, if we check usage relative, the main thing is like
9:15
older versions of Safari, like iOS aren't quite updated yet. And again, some of the Safari and
9:19
Firefox browsers have not been quite updated to the newest versions, but give it a couple months
9:24
like I said, and this should be closer to that 90% number and ready for use. Now, the last somewhat
9:28
experimental thing I want to talk about is custom media queries. And unfortunately this one has by
9:32
far the worst browser support. So let's actually just get rid of all this additional code. Just go
9:36
back to that box that we had before. I'm going to get rid of all the stuff that we have up here. We
9:40
don't need any of that. There we go. And let's just make our box perfectly fine. That's how it
9:44
is. And we'll change this back to a media query. Most often when you're dealing with media queries
9:49
you're going to have queries that you repeat everywhere. For example, your width greater than 400 pixels, maybe that's just a size you repeat everywhere in your application, but it's a huge
9:57
pain to have to copy this down a bunch of times and write all your media queries like this
10:01
Instead, what would be nice is we can just take this and turn it into a variable and reuse it
10:05
everywhere. And that's the idea behind the at custom media property, where you can define a
10:10
custom media query, and this will just be able to be used anywhere. So we can say at custom media
10:15
then we give it a name dash dash, let's just say small. And then we just define what it is. So in
10:20
our case with greater than 400 pixels, and then all you need to do is take that variable you've
10:24
used and pass that in anywhere you have this in your media query. So all the places you use that
10:29
media query, you would pass this in, and that would give you your media query for this. Now
10:33
actually, this should probably be called big instead of large or small. But anyway, there you
10:37
go. That's how this would work. But of course, there is no browser support at all for this right
10:41
now. This is currently in stage two. So it's somewhat stable. And you can use something like
10:46
post CSS again, like I've mentioned to use this live in your site. And if you want to learn how
10:50
you can do that with post CSS, I actually have a full video on how to set up post CSS, I'll link
10:53
in the cards in description for you. But unfortunately, like I said, this doesn't have any support right now. But I'm really hoping since this has been in the spec for years
11:00
that it will get adopted by more browsers, because I'm really looking forward to having something like this available. Now that right there is the last media query related thing I
11:07
want to talk about. And the next few are going to go pretty quickly because they're not too complicated. The first and easiest way to do CSS styling without using a bunch of media queries
11:15
is to just do different HTML for mobile and different HTML for desktop. This is really
11:20
only applicable if you have really complex HTML that is drastically different on mobile and on
11:26
desktop. So like a really complex navigation that has a ton of features on desktop, and a little bit
11:30
simpler navigation on mobile, that's also pretty complex, then what you would do is you write all
11:35
your HTML for one, and you'd give it a class like mobile only, and you would give your other one a
11:40
class like desktop only. And then you will just have a really simple media query that's like
11:46
on the small screen sizes, mobile only is going to be visible, I guess technically, what we would do
11:55
is on the large screen sizes, we would say display none for mobile. And then on the small screen sizes
12:02
we would say display display none for the desktop. That's all you do. So that's the simplest thing
12:07
that you can do. But in 99% of the cases, you probably shouldn't do that because it's just
12:11
extra HTML and extra problems that you can have. This is why you want to use some of the tools
12:15
built into the CSS that allow you to do responsive design without needing a bunch of media queries
12:19
The first one I want to talk about is actually going to be CSS grid. This is perfect for doing
12:23
a bunch of responsive design. So I'm going to come in here, I'm just going to say dot grid
12:27
whoops, dot grid, there we go. I don't want to move the box inside of there. Now I'm actually
12:32
just going to copy down a bunch of different boxes. There we go. So now we have a bunch of
12:36
different boxes inside our grid. And you can see that they are on the right hand side of our screen
12:40
I'm going to remove all of this code that we have except for our box. And for our grid, I'm just
12:44
going to change the display here to grid. Now this won't change anything in our code, but we can set
12:49
up grid template columns. And let's say that you wanted to have like three columns that are going
12:53
to be all the same size. So you could repeat three, one FR, and there you go. Now you have
12:58
three equal sized columns. Now this is great, but as your screen size changes, maybe you shrink it
13:03
down and you'll notice it doesn't look super great. Or as you grow it really large, it doesn't look
13:07
super great. So one of the best things that you can do instead of hard coding a value here for
13:11
the number you want to repeat, you can make this automatic by saying it's either going to auto fill
13:16
or it's going to auto fit. And these both will automatically determine the number of columns
13:20
you need to fit exactly the content you want. And to determine the size of your element, you can use
13:25
a min max here where you give it a minimum and a maximum value. So let's say at a minimum, we want
13:30
this to just be 200 pixels. We never want it to be smaller than 200 pixels. And then we can just say
13:35
we want it to grow to be any size one FR. So now if we give this a quick save and we'll just change
13:40
the minimum here actually to a hundred pixels. Now, all we need to do to get this to actually work properly is just give our grid a width of 100% because by default it's not taking up the
13:47
full width of our body and we'll remove the margin from our body. So we'll just say margin zero here
13:52
Now you can see that all of our boxes are showing up right next to each other. Let's remove the margin from them and remove the hard coded width. So it'll be automatically determined by the actual
14:00
container. And then we'll just add some gap into our grid. We'll just say one REM. There we go
14:04
So now you can see we have our different boxes and no matter what size my screen is, these boxes are
14:08
going to grow and shrink in size until they cannot get any smaller. And then it's going to move them
14:12
to the next line. Or when it grows, it's going to grow until it has room to put a new box on the
14:17
line. So you can see automatically the containers are determining how many boxes I can put on a row
14:22
And this is all with just one single line of CSS. Now the difference between auto fit and auto fill
14:27
is pretty minimal. As you can see, they look pretty much exactly the same, but there is one
14:31
difference. In order to see that difference, we actually need to remove some of the boxes because
14:36
this difference is only determined when the actual width of your container is large enough that you
14:39
can fit everything in one row. So you can see with auto fill, as I change the size of my screen
14:44
every time we have space to add a new box or a new column, it's adding that column. As you can
14:48
see, our boxes are kind of pretending there's invisible boxes there. While if we change this
14:52
to auto fit instead, you can see that now we're not adding additional columns beyond what the
14:57
maximum level number of contents we have. So we have two boxes. So we'll never have more than
15:01
two columns. That's why they're growing so large. But with auto fill, our grid is currently having
15:05
a bunch of columns right now, like four or five different columns to fill the entire width of our
15:09
container. And that just makes sure all of your different elements, even if there's only a few
15:13
of them, all never become too large. Now, if we just take this back to what we had before with a
15:17
bunch of different boxes, another really important thing that you need to know about how you can use
15:21
grid is the ability to do grid auto for the rows and for the columns. In our case, we've defined
15:27
our columns. So we're going to make our rows automatic and we're going to say that they're going to be a hundred pixels tall. Now we can remove the height from our box and that height
15:34
is going to be determined by our auto row right here. So if we change this to like 200 pixels now
15:38
you can see every single row that we add to our container is going to be 200 pixels tall
15:43
or maybe 50 pixels tall. And every time we add a new row, automatically, it's going to be that
15:47
exact height of 50 pixels, 200 pixels, whatever you define. This is again, really important for
15:52
responsive design because we don't know how many rows we're going to have. It's dependent upon how
15:56
many different elements we have as well as how wide or small our screen is. So this allows us
16:01
to take into account anything possible with how many elements we have and how large our screen
16:05
is and make sure it looks exactly like we want again, without any media queries at all. Now
16:09
if you're unfamiliar with CSS grid, I have a full video covered on link in the cards in description. So you can really deep dive into this concept. Now let's go back to when we just had
16:16
exactly one box. So let's just get rid of all these additional boxes. We don't need our grid
16:20
anymore. And we can come in here and I want my box to have a width, 200 pixels height
16:27
200 pixels. There we go. And we can get rid of all this grid code. Now, one thing you're already
16:31
probably super familiar with is the ability to do things like a min width. Let's say we want the
16:35
min width here to be a hundred pixels. We'll do a max width, which we're going to set to 300 pixels
16:40
And then you can specify an actual width, which in our case, we'll set to let's say 75% of our
16:46
screen size. So now what's going to happen is this box is going to be 75% of our screen size
16:50
until it reaches the max width, which in our case is 300 pixels. Let's make it a little bigger, like 500. So you can see, as we expand our screen, once we get to the point where we're at, that's
16:58
500 pixels, the box never gets bigger. Now, when we shrink down our screen, you can see that it
17:03
stayed at 75% of the width of our screen until we reach our min width, which if we change this to
17:07
something like 300 pixels, we can see that a little bit better because as you can see here
17:11
we're at 300 pixels and now the box is not shrinking down. This is a really common use case
17:15
for min, max, and normal width, but you can only do this on a few properties, which is why the clamp
17:20
property is so useful. The clamp property here, what we can do is we can just say our width is
17:24
going to be equal to that clamp. And our clamp has a minimum value, let's say 300 pixels, an actual
17:30
value, which in our case is 75%. And then we have a maximum value, which in our case is going to be
17:34
500 pixels. And this will do the exact same thing as those min, max, and values and so on. So as we
17:40
get our screen larger, you can see once we hit 500 pixels, it stops growing. And if we shrink our
17:44
screen down as when we hit 300 pixels, you can see again, it stops shrinking down. That's really
17:49
important because now we can use this with not just widths, but other things such as font size
17:54
And this is really common. You may change your font size based on your actual width of your
17:58
screen. So here you can set a width value like 1.5 VW, and then you can set a maximum value for
18:03
your font, like let's say 2 REM and a minimum is going to be like 0.75 REM. And now your font will
18:08
always scale between these two values. It will never be smaller or larger. And as your screen
18:13
size changes, it's going to change the size of your font. So if we just add some font to our page
18:17
we can just say lorem like a hundred or something, a ton of different font to our page right here
18:22
As you can see, when our page size changes, our font size will change as well. Let's make this a
18:26
little bit bigger. So we'll do like 3.5 and we'll make the maximum value like 10 and we'll make the
18:31
minimum value 0.5. So we can really see how this changes in size. And also let's make sure that we
18:35
move our font size here into our body. So now you can see as my screen size gets smaller, my font
18:40
size is shrinking down. And as my screen size gets larger, my font size is growing. Obviously this is
18:45
way more drastic than you would want to use. You would want to have a much closer maximum and
18:49
minimum value, and you would want to increase it maybe less than 3.5 VW, but that gives you a
18:54
concept of how this works. And it's really useful for font size because you can scale off of things
18:58
like your viewport units. Now, the last concept I want to talk about, I'm actually going to be using
19:02
a YouTube video I've already recorded. I'll have it linked up in the description and the comments for you, but essentially I just want to talk about the different types of viewpoint units
19:08
the new ones that are really useful for mobile, because as your mobile screen changes in size
19:13
like when you scroll on a page, the URL bar may shrink on your mobile screen. We have different
19:18
viewports for handling that. So we have normal viewpoint units. We have an S version, which is
19:22
like the small version. So whenever that URL bar is shown, that's what will be used as the height of
19:26
your screen or width. Same thing with large. That's going to be when that view is hidden. And then we
19:30
have a dynamic one that starts with D that is going to scale based on the actual size of your
19:35
viewport. So if we play this video here, you can see this gray bar will change in size as I scroll
19:39
my phone, because you can see that URL bar has disappeared while these other bars have stayed
19:43
stationary because they're already defined as either the large or the small viewport. Like I
19:47
said, this is a pretty complex topic. I have a full video covering it, which I'll link in the cards
19:50
and description for you if you want to go more in depth. But it's important to understand these are here if you're doing a lot of really heavy mobile designs that are matter what the actual
19:58
height of your screen is based on that URL bar being shown or not shown. And that right there
20:02
is about 10 different responsive design CSS concepts. If you enjoyed this video, you're
20:07
definitely going to love my videos on container query and those different viewport units. Those
20:11
are going to be linked right over here. With that said, thank you very much for watching and have a
20:14
good day
#Computer Hardware
#Programming
#Software