Let's continue with the work on our list items,
specifically on our images though.
The first thing I would like to change is the distance
between our images.
Each image is sitting directly next to each other.
I think a little bit of margin would help here too
will improve the look of our images.
We will not apply to margin directly on the image though.
I would like to add the margin on the actual
container of the image.
This will basically
well, add this distance between the list items
and therefore also between our images.
For this, I'm back in the code,
and I will add a new selector here.
This time,
not the ID selector but a class selector.
Our destination class selector
we added for all our list items.
And here I'll add a margin of zero top bottom
and 20 pixels left and right.
Let's see if it does the trick.
Yep.
This works great.
And you can see now that we have
this margin around our list items
and therefore our images also decrease the width
as the space of the parent was reduced.
Therefore less space is available for
the content of the parent,
which is our image in the end and whole paragraph.
Besides that,
I would like to add some visual improvements
directly on the images though.
One of these being our good old friend,
the box shadow,
which we'll add with two pixels left, right
Four pixels top bottom,
eight pixels blur radius,
and an RGB code of
68, 67 and 67.
And besides this,
I'll also add a border radius again for our rounded corners
of 10 pixels here and with that
Yeah,
I think our images are a lot more in line
with the styling of our page in general.
We have another issue with our images though
for this I'll zoom in a bit.
Though, you can't see it immediately.
Our images are kind of squashed into the container now,
because if you look at the original images here in
our images folder,
places in Miami,
for example,
you see it's a very wide image in the end.
At the moment,
if we check this version,
well, it is a bit distorted to to say
It doesn't remain the actual ratio
because it kind of has to fit into here.
Now, whilst on these images,
it still looks okay,
this can look very strange on other images.
The great thing is that we have options
or ways to tell CSS
how images should be added to the container
or displayed in the container.
This is defined by the so-called object fit property,
which you will add now to our image selector here.
So it's object fit.
And the default one is fill.
Fil simply means that the image is basically
well resized
to fit into the given dimension.
But this can also mean that the image is stretched if
necessary or squished into the container.
At the moment,
we have the case of the images being squished
into the container.
As I said, it doesn't look too bad,
but it's not the actual aspect ratio that is reflected here.
For this, we have other values for our object fit property.
Another very typically one here is
contain written like this,
save this.
and contain means that the aspect ratio remains.
So the image won't be kind of pushed into the container.
So to say,
but the image will be resized to fit into the container.
This means,
depending on the container ratio,
you will have empty spots in the container.
In our example,
you can see this right here.
These two images now have bigger blank spots top and bottom.
Here, we have smaller blank spots,
but if you can see the problem now that we had.
Now, the images have their initial aspect ratio back,
which makes them a lot wider
before we had this kind of
well, squashed together look,
I can show you this again.
If we changed the spec to fill here,
you'll see.
Yeah, it's just increased in height.
So if we reload the page,
you'll see that the images are kind of distorted.
So both solutions are not perfect here,
but there is a furred value which kind of helps us to
well, fit the images perfectly into our container.
And this value is called cover.
Cover means that the image will remain it's aspect ratio
and fill its container,
and it will be clipped to fit into a container.
So to say,
this simply means that CSS make sure that we have as much
image as possible in the container
whilst remaining this aspect ratio.
What this means in the end is that as you saw just here,
the images in the end are zoomed in a bit here in our case,
as we had these empty spots before, top and bottom.
So we have to show the image a bit bigger,
but with that,
the image is not distorted
and we don't have any gaps,
any blank areas.
With this being in place,
We worked a lot on our images
and I think these look all right now.
What is missing now,
is the work on our text elements
specifically,
I'm referring to the H two element here
and of course,
to our paragraphs inside our list items.