All language subtitles for 006 Responsive Design_en

In this video we'll see how to do Responsive

Design with Tailwind CSS.

Something that conceptually belongs

more in the section about Styling,

but in the previous section

we didn't have any images,

so I couldn't really show you a good example.

Now, "Responsive Design" means styling our pages

so that they will look good

both on a small screen,

like on a mobile phone,

and on large screens, such as on desktop.

To achieve this, sometimes we want

to lay out our content differently

depending on the screen size.

To help with this, Tailwind predefines

five breakpoints,

where a "breakpoint" is a fixed screen width

that we can use to tailor our content.

The breakpoints are "sm", short for "small",

that corresponds to a minimum width of "640px",

"md", for "medium",

that's at least 768 pixels,

and so on, up to "2xl" that's "1536px".

We can use these breakpoints to apply different

styles based on the screen size.

There's a simple example here.

This will set the image width

to "w-16" by default,

but use "w-32" instead on a medium screen,

and "w-48" on a large screen.

So, it will automatically make the

image wider on a larger screen.

Now, it's important to note that

we should target smaller screens by default,

and then override the styles for larger screens.

This is a good approach,

because it encourages us to design our pages so that

they look good on small screens by default.

Once you do that it's usually easier to

adapt the styles for larger screens.

While if you take the opposite approach,

and start designing for a large screen,

it can be then difficult to make everything

fit on a smaller screen afterwards.

So, let's see how this works in practice.

At the moment, we're listing all

the reviews on this page,

but, our Home page is still mostly empty.

What we could do is show a featured review here,

that could be the latest review we published,

for example.

So people can come back and visit our home page

to see what's the latest review available.

We can start by copying the card

code from the Reviews page,

since the featured review will be fairly similar.

Let's put it after the tagline.

But here we don't have a list;

we can use a "div" rather than a list item.

And we'll also need to import the Link component.

I like to keep third party imports first,

before local modules.

Anyway, you can see the review

card in the browser.

Let's add some space below the paragraph,

with the "pb-3" class.

That's better.

Now, let's think about responsive design.

How does this page look on a larger screen?

There's a bit too much blank space.

What we could do is show the game

title next to the image,

rather than below it.

If we set the parent element to use flexbox,

this will display all the child elements in a row.

But in this case we shouldn't limit the width,

so let me remove "w-80" for now.

Ok, the review title is on the right,

and the card will stretch to fill all

the available horizontal space.

You can imagine that we could also display

some other text below the title,

like a summary of the review.

But we won't actually do that right now.

What we're more interested in at the moment

is that this layout won't work

well on a small screen,

because you cannot see the full text any more.

So, let's keep the title below

the image on smaller screens,

and to its right only on larger screens.

Translated into CSS classes,

this means that by default we want

to arrange the items in a column,

and the default applies to smaller screens.

But then we can use the "sm" modifier

to switch to "flex-row"

if the screen is larger than

the "small" breakpoint.

Let's see how this works now.

If we enlarge the browser window,

you can see that at some point the "Stardew

Valley" text moves to the right.

And if we shrink the window,

the text will move back below the image.

The Chrome DevTools show the viewport size

in the top-right corner of the page.

If you notice, the switch happens

as soon as we pass 640 pixels,

that is in fact the predefined width

for the "small" breakpoint.

So this is how we can apply different

styles depending on the screen size.

We could add more rules for other breakpoints,

like "medium", "large", and so on.

But we'll only use the "small"

breakpoint for this example.

Now, to make this look better we

should re-add "w-80" by default.

This way the card will be as wide as the image.

But if the screen exceeds the "small" breakpoint,

we can set the width to full instead.

This way the card will expand

to fill the horizontal space.

Now, let's tweak the styles for this screen size.

We'll need some space before the "h2" text,

so, for "sm", let's add "px-2".

Ok, there's some horizontal padding.

But that's not required when

the screen is very small.

What else do we need to tweak?

The image is only rounded at the top.

It's barely noticeable, but there's no

rounding in the bottom-left corner.

When the image is displayed

to the left of the text,

we should change the rounding accordingly.

So for "sm" we want "rounded-l",

which means on the left.

The left side in fact looks good now.

But the top-right corner also has some rounding,

and it shouldn't.

That's because we set "rounded-t" by default,

so it always applies the rounding to the top.

We'll need to disable any rounding

on the right side,

by using "rounded-r-none".

This way it should finally be consistent

with the card border.

You can see how some times you have

to fiddle with the styles,

to make sure they look good on all screen sizes.

This can be quite time consuming,

which is why I won't make all

our pages fully responsive,

nor cover all possible screen sizes.

But this example should give you the

basic idea of how to do that.

The key is to choose a style that works

well on smaller screens by default,

like in this case displaying

all the items in a column.

And then override that style for larger screens,

for example to display the items in a row instead.