Let's now do our first styling steps
in our highlights section
and we will follow a structured approach, so we will style
all our different elements of that page step-by-step
but I would like to get started
with two specific issues we have at the moment.
The first one is quite obvious I guess.
We have very huge images here, as you can see,
the images will cover the entire page, basically.
And besides this, this is something we'll see
in a few seconds, the images are displayed below each other
and not next to each other, images are inland elements
so typically these would be positioned next to each other
but as our images are part of the list element here,
well list elements are block elements
therefore these are positioned below each other.
However, first to reduce the size of these images,
I will follow the same approach
that we had for our background image up here.
And this was just adding a fixed height to these images.
For that, we go back to our project
and here into the styles CSS file, not the shared CSS file.
Styles CSS contains only styles
which are appearing on our landing page
and there I'll use our destination class we added.
So basically we can access all the lists items
with this destination class and in there
I want to select all image elements that we have.
As I said, I would like to change the height
and I will set it to a fixed value of 200 pixels here.
With that if we go back, you can see that, well,
our page improved a lot already
but what you can also see is that, as I said,
the images are displayed below each other.
We learned how we can quickly fix that.
We can do this with Flexbox which has a default
flex direction of row, therefore the elements
would be positioned next to each other,
but where do we apply our display flex rule now?
Well, we apply it on our destinations ID.
So the unordered list will become our flex container.
The container contains free flex items,
our list elements here and as the images are part of this
list element, well, the positioning should be all right.
Let's give it a try by adding the destinations ID.
So here we used the ID selector with the hashtag,
not the class selector for the individual list items.
And here I'll simply go with display flex
and with that, this should look better, yeah.
We can also activate the integrated flex helper here
by clicking onto this well, flex button.
With that, we can see our full flex container here
also indicated by this unused area.
So at the moment the flex container occupies
the entire space on this page.
This is not what I would like to have though.
I would like to reduce the width of the flex container
to make sure that the images do not start
directly here at the left and the right
and then I would also like to center the flex container.
We learned how we can do this
in the previous lectures already.
If you remember back the logic we applied
in our header here, where we used the width property
with percentage values we can actually do
the same thing right here.
At the moment we have a width of 100% basically.
So if you would go back to our destination selector
and apply the width of 100%, what is happening?
Well nothing is changing, our flex container here
if we selected and scroll down has a width of 1022 pixels.
And where is this width coming from?
Well, if we check our width of the parent element
of the section with the ID highlights,
we see this is exactly the same width.
So at the moment, our width property
if we use percentage values refers to the parent.
This is different when comparing it to the behavior we had
when we use the percentage value in combination
with absolute or fixed position elements,
there are other rules applied.
But again, typically if you have normal elements
as I would call this here, the parent is typically
the reference point for percentage values.
Once again, more about this can be found
attached to the last lecture of this module.
As we know that the width property in percentage values
refers to the parent, well, then we could simply say
that instead of 100% we simply use a value of 90% here
with that you see that our width is reduced.
Now, the flex container only uses roundabout
920 pixels at the current position here.
And with that, we can use another trick we learned
in this course to center block elements.
Here, the unordered list is a block element
therefore, what can we do?
Well, we can use our margin property
with the auto value to center the container here.
If we do this, so we use margin auto,
so auto top, left, bottom, right
then the container is centered.
Again if we select it, you see it's indeed in the center
of the page, we have this unused space to the right here.
We'll tackle this in a few seconds
when we work on the images
but to finish the initial work on our container
I would only like to add one last thing here.
And this is a little bit of bottom margin here to make sure
we have a bit more distance to the bottom of the page.
Let's do this quickly by adding
the "margin-bottom" property here.
I would like to add a margin of, let's say, 40 pixels
with that we can now scroll down a bit
and have a bigger gap here at the bottom
which looks better in my opinion.
So with the initial look on the container done
we can now focus on to the images a bit more
because the container is centered
but the images look a bit off.