Flexbox CSS tutorial for Beginners #4 – Mobile Responsive Design


In this episode of flexbox tutorial part 4,
we are going to make our flexbox mobile responsive. Now flexbox has an auto shrink or grow option
to narrow or widen your contents with the changing value of your display
device. This property is known as
flex-shrink or flex-grow that depicts how fast are flexbox will relatively shrink or
grow with respect to the other divs in the same container. If the values are same then
how Rapid will it change with the changing value of the device-width. But this is not the ideal case we should rely
every time. If we keep on using the
default value at the lower display width, we will get the following display which is
entirely wrong for lower display device width. So let’s look for an alternative then. At lower dimension due to lower display width,
it is rather problematic to work with display-flex property. The content gets smaller in size. So what is the alternative
then? Let’s find out into source code. [Music..] Now this is the project that so far we have
created. This is the getup and if we look
here we can see that the thing that we had mentioned previously the auto shrinking
property of flexbox or the auto growing property, it is now in effect but as you can see
the major drawback of this kind of therapy is that, all of these contents, those are
coming side by side. But if we wish to keep our contents as we
have seen as in case in our bootstrap design, that the contents are
getting ups and downs in case of lower display device- width, and in case of higher
display device width or larger display device preview, it is getting side by side. So if we want to make changes in this sort
of manner, then all we can do.. Let’s get back to our project and here in
this stylesheet CSS, we can observe here we can
witness here that this is the motherBox1 and here we have provided the display flex option. Now, due to this property of display
flex, all of these contents those are getting side by side. What if we now create media
query where I have assigned a media query of min-width 768px. And here I have already
created a same class name that I have created over here, this mother Box1, all I am
doing I am just pressing control+X, that means I am cutting this thing off, and here
inside this media query I have mentioned now this display:flex option. That means until
the media width is 767px, all these types of contents those things well be coming
vertically up and down; that means these things will be vertically stacked one over
another, and when the media width is 768px, then all these contents should be coming
side by side as we can see here. Now let’s reload and we can see that as we
have expected all these contents those are now
coming vertically up and down and there’s absolutely no problem with it. Now for say let’s provide here 767px and we
can see that still these contents are getting vertically stacked on each other. Now this device-width or this media-width,
it is now 768px, and we can see that these contents are getting horizontal again. They
are coming side by side. So if we press Control + shift + m, we can
see that in the larger device preview, all these contents
those are practically getting aligned side by
side, and if we press Control + shift + m again, and if we come back then we can see
that all these contents are stacked on each other. We can do many major things over here, such
as we can increase the font size or we can specify anything else we want to display in
the larger device preview those we do not wish to come over in the lower display device
and for all these things, we have assigned a particular or a minimum width, which is
768px. So this is how we can convert CSS
flexbox container to a mobile responsive one, without any ID of bootstrap mobile
responsive design. In the next tutorial we are going to learn
how to insert a menu and how to resize it. So that’s all for today’s tutorial. Hope to see you guys in the next
tutorial. If you guys have liked this tutorial then
do not hesitate to hit that red subscribe button down below. Hope to see you guys in our next tutorial,
till then, bye.

Add a Comment

Your email address will not be published. Required fields are marked *