So let's see what we created in this module
and if all the responsive design is working or if there are some pages left where we have to improve
our code and make the page a bit more responsive.
So I think our starting page right here up, this is the mobile unit,
this looks pretty nice, if I reduce the size,
it still looks good,
we don't have any big issues, so I'm quite happy with that. If I click onto the modal, the modal appears, this
is nice.
Let's increase the size,
this looks also good.
So I would say for the starting page,
let's increase it further, yes the design is pretty nice actually.
Let's have a look at the second page,
the packages; the desktop view is nice,
we have this footer in here still, we will fix that later
but I think for the moment, this is not a big issue.
The more important thing is that the responsive design right here is working, it looks good and yes,
I'm also quite happy with that,
that's maybe two less width,
actually we won't go below this value and this still looks fine
actually. The great thing is that we didn't have to implement any responsive design on this page because
the default behavior of the elements was sufficient to ensure this quite nice design on this page
actually. Even if I have a look at the mobile view for example, this looks fine right here.
Let's now maybe also switch to the starting page once again,
yes I think it looks still good, even on the real or on the simulated mobile device.
However I think the customers page is not done yet.
This looks OK right here,
not a big problem but right there, I don't know,
this is not how it should be.
I think a better approach would be that as soon as we are in the mobile view,
so right here, we basically display the image on top,
then we have the text of Mike Statham,
then maybe the text of John Mellow and then the image of John Mellow so that we have kind of a nicer structure.
As soon as we are in the desktop mode, it can actually kind of look the way it looks like right now,
that's fine.
So what this means for us is we have to work on the customers page,
so let's do this now. For that we have to go to the customers.css file
and now think about the way, how we can achieve what we want. Again
we think mobile first,
so we want to make sure that in this view right here, there is an image, then the text, then another text
and then the second image.
Now how can we achieve that?
Well, let's have a look at the structure of this main page.
We have the main element right here,
then we have the div
and in this div, we have the two testimonial classes. Inside these classes, we have the image container
and the info container,
same thing right here for the lower class.
The first problem is that the image and the text is displayed next to each other.
If we look at the code, we can see right here in the testimonial image container what the reason for
that is. We have display inline block once again,
so let's comment this out because we will need it later for the media query
and if we now go back and reload the page, we can see that now we are getting already closer to the result
that we want to have.
Now we have an image, the text, another text and another image.
So with that, we achieved our first step but
still the text is not displayed as intended,
so this is basically the testimonial info class.
Let's maybe have a look at the code and find this class right here
and as we can see, we have also inline block right there.
So if we comment this out like that, let's see what happens then, if it looks better,
yes
now we have the text aligned to the left but if we now also get rid of the rest of the code right here
because why would it be aligned in the middle
and why should it only have 30% of the width, we don't need that, then we can see that the image
and the text look a lot better now right
because that's probably more of a responsive design or a mobile design that we would like to have in
the end.
So with that, we already improved the image container and the info container,
this looks better now.
What we could then also change between the two testimonial classes, so right here and right there, is
this margin in between that we had. I think if we just comment this out for the moment, we would kind
of get the two testimonials a bit closer together,
let's see,
yes
and I think with that, the page looks a bit cleaner maybe.
What we can also get rid of is the vertical align right here,
I don't think we need that anymore, so we can also comment this out right here because now we have normal
block level elements right here and we don't need that vertical align comment anymore.
And then we have this testimonial list right here
but I don't think we have this class anymore in our code, so we can also comment this out for the moment,
this shouldn't have any impact on our website right here,
no it hasn't,
so we also got rid of this code now
and I think with that, our mobile design looks quite OK now. As we can see, it's probably not perfect yet
but we will come back to this image part later throughout the course and change the way the images are displayed
in general.
Therefore, I do not want to focus too much onto this right now,
the only thing I want to make sure is that once we hit our desktop design, I want to make sure that the
design doesn't stay like that but that we have some responsive design in it.
For that, let's go back to our code and let's add the media query at the bottom right here.
The media query should again follow the behavior we know so far,
so the min width of 40rem, and which classes do we now target?
I think the testimonial class right here with the 3rem left and right margin is definitely something
that we want to have back,
so let's add it right here
and comment the code in, let's see what happens if I reload the page, we have a bit more margin between that in
the desktop version and that's definitely fine because we have more space available right here.
The next class we could target is and we could delete this course before, like that.
So the next class we could target is our image container right here because I would like to add back
these two things right here, the display inline block an the vertical align middle declarations.
So let's go down here
and add it as a second class right here, we shouldn't forget about the curly braces right here
and we can delete this part and let's comment in the two declarations right here.
If we do that and reload the page, we can see that our images are now again displayed to the left and
to the right, like that,
so that's quite OK as it is for now.
You might probably say that this looks kind of off but trust me, as I said, we will work on this image
part in more detail later
and then this structure will be exactly what we're going to need.
What we still could do though and this brings us quickly back to our mobile design, please excuse that
now,
but actually, why don't we make the image container with a width of 100%
where it's possible, like that in the mobile design, like that because with that the image gets bigger and bigger,
like that and if we then increase our max width to the 40rem we had for our media query right here
like that, then we could also make a smooth transition to that,
can we see it? Now it jumps to the media query and I think this looks a bit better because now we
really have the images in the center
when we watch the mobile view and then jump into our mobile query where the text gets kind of pulled apart,
like that,
I think this looks better.
So sorry for that little jump back to our mobile part again but I think with that, we can delete this
part right here
and we also added the image container to our media query right here.
The next thing we should add back in in our media query is the testimonial info right here, right there,
this is what we change before.
Let's maybe add align and this can of course stay in but we should bring back the display inline block
and the vertical align and the maximum width.
So this brings us back to the design that we had before, so this is the media query right here,
so as you can see the text now jumps to the other side,
that's exactly how it's intended
and as you can see, we now draw it apart or pull it apart
and as soon as our text has enough space, it jumps next to the image.
That's actually exactly the behavior that we want to have
and I have to state that again, we'll dive into the details of this page throughout the course so this is kind
of a draft mode
still.
However we added back the testimonial info class right here, therefore we can also delete this part from
here,
this part that we commented out and although we will come back to this customers page,
I think that the behavior we saw right here,
so this jump basically,
so we go from the mobile to that interim situation right here and then to the final position we want
to have,
maybe we should fix that right now because it's an easy fix actually, because the problem simply is that
once we are leaving our mobile view, the image is simply too big
and as soon as we get more and more space right here, the text can jump next to the image as I just explained.
So why don't we just go back to our code and down to our media query and now simply add a width, right
here of let's say maybe 66, so two-thirds of the entire page for our image container.
Because if we do that and reload the page, we can see that now, we don't have this jump anymore because
we are in the mobile view,
then we come to our 640 pixels
and as this image only occupies two-thirds of our page, well there is enough space for our testimonial
info class right here which only uses 30% of the width and therefore, we could easily fix this
issue and make sure that our page,
well as I think, already looks a lot better.
There is another problem though before we finished this customers page for now, because if we increase
the size of our website, as you can see it right here, I think there was a point where it doesn't look
good anymore and I would say this point is reached right here,
let's say at around about maybe 1500 pixels. I think this looks still nice but then
if it gets pulled apart further, it doesn't look good anymore
and we also learned how we can solve such a problem, because we basically only need to make sure that
the testimonial class,
so this one right here which basically contains, as we can see it, the images and the text, so right here
and right there, both times we have this testimonial class.
So if we would give this container a maximum width of this 1500 pixels, then we
could ensure that the page gets not pulled apart too far.
Therefore let's go back to the testimony class and also add the max width property right here with
1500 pixels.
Now just in case you wonder why we're using pixels this time, the more consistent approach would of course
be using rem right here
but as we only applied rem so far for our media queries and I would also like to show you that you can use
pixels there,
it's not what I recommend but it's what you can do,
I think it makes sense to use the 1500 pixels right here.
As I said, this is more the demonstration purpose right here not the real consistency approach that we
would normally follow when creating our responsive website. If we do that and reload the page, we can
see that it keeps moving the way we had it before
but as soon as we reach the 1500 pixels, it is stuck right here.
The problem still is that it's kind of stuck in a strange way because the distance increases to the
right of John Mellow right here
but Mike Statham, our first testimonial is stuck to this left side and this issue can also be quickly
solved if we just change our margin right here,
so this one, the top and bottom margin is fine but we should simply use our margin
auto trick, that's the trick I showed you in the units module
and as you can see, we can apply it once again right here.
If I now reload the page, we can see that we now have a really good status for our customers page.
We have the starting situation right here with the mobile view,
I think this little gap right here and right there is totally fine, that's simply due to the margin that we
have right here on top of our first testimonial class and right here on top of the footer
but I think this is OK to keep this little distance and if we then come to our 640 pixels breaking point,
it jumps immediately to the desktop view and it gets bigger and bigger up to the point where we reach
our 1500 pixels width
and with that, it also looks nice on bigger screens.
And with that, our customers page looks good,
we now have a really nice responsive design.
The problem though is that if I look back to our packages page which looks actually fine,
I think if we are honest, we should also set a limit to the width
these packages can have because I think also from this 1500 pixels on,
so right here, it shouldn't be able to increase anymore.
So let's implement that fix to our packages page in the next lecture.