Now, let's work on styling this cart page.
For this, of course, in the .cart-item.ejs file,
we have the .cart-item class on every article,
and there, then the .cart-item-info
and .cart-item-management classes on those divs.
We have the card-product-price class on this span.
So we can use these classes for styling the items,
and in cart.ejs we can, of course,
also target the unordered list,
and this cart-total id.
The unordered list has the id card-items
in case we want to add some styling there.
So, therefore we can go to cart.css,
and maybe start with
styling the individual .cart-item article elements
that we have in there.
And as always, there are plenty of ways of styling this.
I will choose display flex on those items,
so that these two divs that we have in there,
will be positioned side by side in a row,
at least on bigger screens,
and instead below each other on smaller screens.
So, therefore, I'll set flex-direction column here
as a default for a smaller screens.
And then we can also add a media query
where we have a min width of 48rem,
which I'm looking for.
And on those bigger screens,
I'll then go to my .cart-item,
and they're change the flex-direction to row,
so that these items sit next to each other.
With that, if we save this,
we've got this look on bigger screens,
and on smaller screens, it looks like that.
Now, of course, this is not the final look I want.
We still got plenty of improvements to do.
For example, on bigger screens,
when we have a row,
I want to add a space-between the content
of those row items,
so that this is pushed to the right.
But now I also would like
to set those cart items a bit more apart
from each other.
So that on a .cart-item,
we can give it as a background-color
of var, color, gray, let's say 700,
a dark grayish color,
and also add some padding, maybe space-4,
and a border-radius of border-radius-medium.
With that, we've got this look.
Now, to see a real difference between the cart items,
we should also add a margin
of let's say space-4 top and bottom,
and 0 left and right.
And with that added, it looks like this.
So, this is not too bad, I'd say.
The margin here on the title should go away though.
So that the title aligns
with the input update button combination.
And, of course,
the input here also should be styled differently.
So, therefore I'll target the .cart-item h2 element,
and simply change the font-size there,
to let's say, 1rem, actually, to make it smaller.
And I'll set the margin to 0.
With that, this is the look I got,
and I prefer that look.
I think it looks a bit cleaner.
Now, I also want to style the input differently.
And, for that, of course,
we can target .cart-item input like this.
And, first of all, inherit our base font.
Then, also, simply add a little bit of padding,
let's say of space-2, top and bottom, and left and right,
so that we have some padding in that input, like this.
And I want to have a little rounded corner there as well.
So I'll give that border radius var(--border-radius-small),
like this.
And with that, I think that doesn't look too bad.
Let's actually also remove the border color,
which we have by default,
by setting border none.
This will still keep the border radius,
but now the border doesn't have any color.
Okay.
Now, I also want to style this per unit price differently.
And for that, we have the cart-product-price class there.
So, now, we can target this,
and maybe set the font-style to italic there.
That's all I want to do here.
With that, if we save this, it's a italic,
and yeah, I think that looks a bit better.
We could also think about increasing the main price here,
but for me,
changing that unit price is everything I want to do.
I will, however, also change the color a little bit,
and set this to color-gray-300 here,
so that it looks like this.
You can, of course, fine tune these styles,
but these are the basic styles I want to work with,
when it comes to the cart items.
Now, if we have a look at smaller screens,
this also looks okay.
I don't think we need to change anything there.
This should be fine.
You could consider putting input and update button
into separate lines, into separate rows.
But I think this actually does the trick,
and, therefore, I'll leave it like this.
But I do want to update this total price
and how we display that.
And for this, in cart.ejs, we have the cart-total id here
where we didn't have the paragraph
with the total price inside,
and that's therefore another thing
that I want to target here.
The paragraph inside of cart-total,
which is that paragraph with the total price.
And here I want to ramp up the font-size
to let's say 1.5rem
so that this is a bit bigger.
This total price.
And, I also will actually give it a font-weight of bold
and change the color to use the primary color here,
-color-primary-500,
like this.
If we save all of this,
this total price is now really highlighted,
and it should be fairly easy to see.
Now the Buy Products button should actually sit
in the same row,
and to achieve this, since it's in the same div,
not by accident, but on purpose,
we can select this id,
and add display flex to ensure
that these two items are in the same row.
So for this,
I'll just select the cart-total id element like that,
and then add display flex,
and also add justify-content space-between
to push these two items to the left and right edges.
With that, it looks like this.
Not totally convinced by the size of the button.
It has that size
because of the margin we have here on the paragraph.
The button then assumes the same height
because of how flexbox works by default.
That is something we'll easily be able to change though.
But before I do that,
I want to check this on mobile screens.
And this actually also looks fine.
We could, of course, also consider putting this
into separate lines here though.
And I think we'll do that.
But first of all,
let's add align-items center to cart-total.
This ensures that the default of stretch is overwritten,
and, therefore, the button will not stretch
to meet the height of this neighboring item,
including its margin,
but instead it will be centered on the same height.
But, of course, these are actually my non-mobile styles.
So, I'll copy them and move them into this media query,
and get rid of display flex,
because I will set that either way.
But I'll add flex-direction row
because I'll set a different flex-direction
as a default for mobile screens.
Here, for cart-total, I'll set display flex,
but, now, set flex-direction to call column as a default,
and then justify-content to center
and align-items to center,
to align all the items in that flexbox.
Since I set align-items center here,
we can, of course, remove it here in our desktop style rule.
With that,
on a big screen, it looks like before,
but on smaller screens, it now looks like that.
And that is my cart screen already.
Of course, you can always do more with it,
but I like it like this.
Now I want to make sure
that these Update buttons do something when we click them,
and that we then update the cart correctly.