1
00:00:02,290 --> 00:00:05,760
So let's see what we created in this module

2
00:00:05,920 --> 00:00:12,760
and if all the responsive design is working or if there are some pages left where we have to improve

3
00:00:12,820 --> 00:00:16,510
our code and make the page a bit more responsive.

4
00:00:16,510 --> 00:00:20,120
So I think our starting page right here up, this is the mobile unit,

5
00:00:20,290 --> 00:00:23,430
this looks pretty nice, if I reduce the size,

6
00:00:23,470 --> 00:00:24,940
it still looks good,

7
00:00:24,970 --> 00:00:31,870
we don't have any big issues, so I'm quite happy with that. If I click onto the modal, the modal appears, this

8
00:00:31,870 --> 00:00:32,810
is nice.

9
00:00:34,570 --> 00:00:36,250
Let's increase the size,

10
00:00:36,250 --> 00:00:37,550
this looks also good.

11
00:00:37,720 --> 00:00:40,340
So I would say for the starting page,

12
00:00:40,440 --> 00:00:45,320
let's increase it further, yes the design is pretty nice actually.

13
00:00:45,730 --> 00:00:47,290
Let's have a look at the second page,

14
00:00:47,290 --> 00:00:50,010
the packages; the desktop view is nice,

15
00:00:50,050 --> 00:00:53,280
we have this footer in here still, we will fix that later

16
00:00:53,290 --> 00:00:56,370
but I think for the moment, this is not a big issue.

17
00:00:56,380 --> 00:01:03,310
The more important thing is that the responsive design right here is working, it looks good and yes,

18
00:01:05,040 --> 00:01:06,470
I'm also quite happy with that,

19
00:01:06,570 --> 00:01:08,130
that's maybe two less width,

20
00:01:08,220 --> 00:01:14,020
actually we won't go below this value and this still looks fine

21
00:01:14,020 --> 00:01:18,980
actually. The great thing is that we didn't have to implement any responsive design on this page because

22
00:01:19,250 --> 00:01:25,330
the default behavior of the elements was sufficient to ensure this quite nice design on this page

23
00:01:25,340 --> 00:01:30,800
actually. Even if I have a look at the mobile view for example, this looks fine right here.

24
00:01:31,010 --> 00:01:34,070
Let's now maybe also switch to the starting page once again,

25
00:01:34,180 --> 00:01:40,000
yes I think it looks still good, even on the real or on the simulated mobile device.

26
00:01:40,160 --> 00:01:44,360
However I think the customers page is not done yet.

27
00:01:44,420 --> 00:01:46,240
This looks OK right here,

28
00:01:46,250 --> 00:01:50,080
not a big problem but right there, I don't know,

29
00:01:50,090 --> 00:01:51,790
this is not how it should be.

30
00:01:51,920 --> 00:01:56,570
I think a better approach would be that as soon as we are in the mobile view,

31
00:01:56,600 --> 00:01:59,990
so right here, we basically display the image on top,

32
00:01:59,990 --> 00:02:02,600
then we have the text of Mike Statham,

33
00:02:02,960 --> 00:02:08,210
then maybe the text of John Mellow and then the image of John Mellow so that we have kind of a nicer structure.

34
00:02:08,660 --> 00:02:14,970
As soon as we are in the desktop mode, it can actually kind of look the way it looks like right now,

35
00:02:15,050 --> 00:02:15,930
that's fine.

36
00:02:16,190 --> 00:02:20,690
So what this means for us is we have to work on the customers page,

37
00:02:20,690 --> 00:02:26,570
so let's do this now. For that we have to go to the customers.css file

38
00:02:26,680 --> 00:02:31,160
and now think about the way, how we can achieve what we want. Again

39
00:02:31,180 --> 00:02:32,590
we think mobile first,

40
00:02:32,680 --> 00:02:38,160
so we want to make sure that in this view right here, there is an image, then the text, then another text

41
00:02:38,320 --> 00:02:40,540
and then the second image.

42
00:02:40,540 --> 00:02:42,270
Now how can we achieve that?

43
00:02:42,460 --> 00:02:45,690
Well, let's have a look at the structure of this main page.

44
00:02:45,760 --> 00:02:48,800
We have the main element right here,

45
00:02:48,880 --> 00:02:49,760
then we have the div

46
00:02:49,930 --> 00:02:57,560
and in this div, we have the two testimonial classes. Inside these classes, we have the image container

47
00:02:57,710 --> 00:02:58,980
and the info container,

48
00:02:59,000 --> 00:03:02,510
same thing right here for the lower class.

49
00:03:02,600 --> 00:03:07,390
The first problem is that the image and the text is displayed next to each other.

50
00:03:07,640 --> 00:03:13,160
If we look at the code, we can see right here in the testimonial image container what the reason for

51
00:03:13,160 --> 00:03:16,460
that is. We have display inline block once again,

52
00:03:16,490 --> 00:03:22,340
so let's comment this out because we will need it later for the media query

53
00:03:22,550 --> 00:03:29,540
and if we now go back and reload the page, we can see that now we are getting already closer to the result

54
00:03:29,660 --> 00:03:30,670
that we want to have.

55
00:03:30,680 --> 00:03:34,370
Now we have an image, the text, another text and another image.

56
00:03:34,370 --> 00:03:37,990
So with that, we achieved our first step but

57
00:03:38,120 --> 00:03:41,600
still the text is not displayed as intended,

58
00:03:41,630 --> 00:03:45,720
so this is basically the testimonial info class.

59
00:03:45,740 --> 00:03:50,750
Let's maybe have a look at the code and find this class right here

60
00:03:50,750 --> 00:03:54,990
and as we can see, we have also inline block right there.

61
00:03:55,040 --> 00:04:01,260
So if we comment this out like that, let's see what happens then, if it looks better,

62
00:04:01,730 --> 00:04:02,470
yes

63
00:04:02,480 --> 00:04:09,860
now we have the text aligned to the left but if we now also get rid of the rest of the code right here

64
00:04:09,890 --> 00:04:12,010
because why would it be aligned in the middle

65
00:04:12,110 --> 00:04:18,380
and why should it only have 30% of the width, we don't need that, then we can see that the image

66
00:04:18,410 --> 00:04:21,240
and the text look a lot better now right

67
00:04:21,260 --> 00:04:27,140
because that's probably more of a responsive design or a mobile design that we would like to have in

68
00:04:27,140 --> 00:04:27,820
the end.

69
00:04:28,100 --> 00:04:33,950
So with that, we already improved the image container and the info container,

70
00:04:33,950 --> 00:04:35,010
this looks better now.

71
00:04:36,130 --> 00:04:42,370
What we could then also change between the two testimonial classes, so right here and right there, is

72
00:04:42,400 --> 00:04:48,610
this margin in between that we had. I think if we just comment this out for the moment, we would kind

73
00:04:48,610 --> 00:04:51,750
of get the two testimonials a bit closer together,

74
00:04:51,790 --> 00:04:52,530
let's see,

75
00:04:52,690 --> 00:04:53,020
yes

76
00:04:53,080 --> 00:04:57,250
and I think with that, the page looks a bit cleaner maybe.

77
00:04:58,370 --> 00:05:02,450
What we can also get rid of is the vertical align right here,

78
00:05:02,480 --> 00:05:08,090
I don't think we need that anymore, so we can also comment this out right here because now we have normal

79
00:05:08,300 --> 00:05:12,950
block level elements right here and we don't need that vertical align comment anymore.

80
00:05:13,310 --> 00:05:18,140
And then we have this testimonial list right here

81
00:05:18,210 --> 00:05:25,270
but I don't think we have this class anymore in our code, so we can also comment this out for the moment,

82
00:05:25,280 --> 00:05:28,220
this shouldn't have any impact on our website right here,

83
00:05:28,220 --> 00:05:28,960
no it hasn't,

84
00:05:29,000 --> 00:05:31,400
so we also got rid of this code now

85
00:05:32,030 --> 00:05:38,690
and I think with that, our mobile design looks quite OK now. As we can see, it's probably not perfect yet

86
00:05:38,990 --> 00:05:45,020
but we will come back to this image part later throughout the course and change the way the images are displayed

87
00:05:45,020 --> 00:05:45,960
in general.

88
00:05:46,010 --> 00:05:50,540
Therefore, I do not want to focus too much onto this right now,

89
00:05:50,540 --> 00:05:55,780
the only thing I want to make sure is that once we hit our desktop design, I want to make sure that the

90
00:05:55,800 --> 00:06:01,080
design doesn't stay like that but that we have some responsive design in it.

91
00:06:01,310 --> 00:06:07,130
For that, let's go back to our code and let's add the media query at the bottom right here.

92
00:06:07,340 --> 00:06:11,380
The media query should again follow the behavior we know so far,

93
00:06:11,390 --> 00:06:19,300
so the min width of 40rem, and which classes do we now target?

94
00:06:19,320 --> 00:06:26,310
I think the testimonial class right here with the 3rem left and right margin is definitely something

95
00:06:26,310 --> 00:06:27,650
that we want to have back,

96
00:06:27,660 --> 00:06:30,610
so let's add it right here

97
00:06:32,170 --> 00:06:39,040
and comment the code in, let's see what happens if I reload the page, we have a bit more margin between that in

98
00:06:39,110 --> 00:06:44,680
the desktop version and that's definitely fine because we have more space available right here.

99
00:06:44,680 --> 00:06:52,630
The next class we could target is and we could delete this course before, like that.

100
00:06:52,640 --> 00:06:59,500
So the next class we could target is our image container right here because I would like to add back

101
00:06:59,510 --> 00:07:05,310
these two things right here, the display inline block an the vertical align middle declarations.

102
00:07:05,330 --> 00:07:07,100
So let's go down here

103
00:07:08,260 --> 00:07:16,010
and add it as a second class right here, we shouldn't forget about the curly braces right here

104
00:07:16,220 --> 00:07:23,800
and we can delete this part and let's comment in the two declarations right here.

105
00:07:23,930 --> 00:07:32,450
If we do that and reload the page, we can see that our images are now again displayed to the left and

106
00:07:32,450 --> 00:07:35,600
to the right, like that,

107
00:07:35,600 --> 00:07:37,880
so that's quite OK as it is for now.

108
00:07:38,030 --> 00:07:44,420
You might probably say that this looks kind of off but trust me, as I said, we will work on this image

109
00:07:44,450 --> 00:07:46,100
part in more detail later

110
00:07:46,130 --> 00:07:50,370
and then this structure will be exactly what we're going to need.

111
00:07:50,690 --> 00:07:57,560
What we still could do though and this brings us quickly back to our mobile design, please excuse that

112
00:07:57,560 --> 00:07:58,200
now,

113
00:07:58,340 --> 00:08:05,540
but actually, why don't we make the image container with a width of 100%

114
00:08:05,550 --> 00:08:11,680
where it's possible, like that in the mobile design, like that because with that the image gets bigger and bigger,

115
00:08:14,970 --> 00:08:27,780
like that and if we then increase our max width to the 40rem we had for our media query right here

116
00:08:27,960 --> 00:08:31,410
like that, then we could also make a smooth transition to that,

117
00:08:31,410 --> 00:08:36,720
can we see it? Now it jumps to the media query and I think this looks a bit better because now we

118
00:08:36,720 --> 00:08:39,280
really have the images in the center

119
00:08:39,300 --> 00:08:45,600
when we watch the mobile view and then jump into our mobile query where the text gets kind of pulled apart,

120
00:08:45,660 --> 00:08:46,220
like that,

121
00:08:46,320 --> 00:08:47,350
I think this looks better.

122
00:08:47,430 --> 00:08:53,430
So sorry for that little jump back to our mobile part again but I think with that, we can delete this

123
00:08:53,430 --> 00:08:54,540
part right here

124
00:08:54,690 --> 00:08:59,460
and we also added the image container to our media query right here.

125
00:09:00,490 --> 00:09:07,630
The next thing we should add back in in our media query is the testimonial info right here, right there,

126
00:09:07,630 --> 00:09:10,770
this is what we change before.

127
00:09:10,970 --> 00:09:18,000
Let's maybe add align and this can of course stay in but we should bring back the display inline block

128
00:09:18,660 --> 00:09:21,800
and the vertical align and the maximum width.

129
00:09:21,810 --> 00:09:26,890
So this brings us back to the design that we had before, so this is the media query right here,

130
00:09:26,970 --> 00:09:31,170
so as you can see the text now jumps to the other side,

131
00:09:31,170 --> 00:09:33,480
that's exactly how it's intended

132
00:09:33,540 --> 00:09:36,450
and as you can see, we now draw it apart or pull it apart

133
00:09:37,270 --> 00:09:42,300
and as soon as our text has enough space, it jumps next to the image.

134
00:09:42,580 --> 00:09:46,090
That's actually exactly the behavior that we want to have

135
00:09:46,240 --> 00:09:52,330
and I have to state that again, we'll dive into the details of this page throughout the course so this is kind

136
00:09:52,330 --> 00:09:53,100
of a draft mode

137
00:09:53,180 --> 00:09:53,740
still.

138
00:09:53,950 --> 00:10:00,550
However we added back the testimonial info class right here, therefore we can also delete this part from

139
00:10:00,550 --> 00:10:01,000
here,

140
00:10:01,060 --> 00:10:07,480
this part that we commented out and although we will come back to this customers page,

141
00:10:07,540 --> 00:10:09,870
I think that the behavior we saw right here,

142
00:10:09,910 --> 00:10:12,400
so this jump basically,

143
00:10:12,400 --> 00:10:19,000
so we go from the mobile to that interim situation right here and then to the final position we want

144
00:10:19,000 --> 00:10:19,720
to have,

145
00:10:19,870 --> 00:10:26,080
maybe we should fix that right now because it's an easy fix actually, because the problem simply is that

146
00:10:26,410 --> 00:10:30,140
once we are leaving our mobile view, the image is simply too big

147
00:10:30,190 --> 00:10:36,140
and as soon as we get more and more space right here, the text can jump next to the image as I just explained.

148
00:10:36,430 --> 00:10:45,080
So why don't we just go back to our code and down to our media query and now simply add a width, right

149
00:10:45,080 --> 00:10:53,450
here of let's say maybe 66, so two-thirds of the entire page for our image container.

150
00:10:53,450 --> 00:11:00,080
Because if we do that and reload the page, we can see that now, we don't have this jump anymore because

151
00:11:00,080 --> 00:11:01,390
we are in the mobile view,

152
00:11:01,550 --> 00:11:04,550
then we come to our 640 pixels

153
00:11:04,550 --> 00:11:11,210
and as this image only occupies two-thirds of our page, well there is enough space for our testimonial

154
00:11:11,220 --> 00:11:17,150
info class right here which only uses 30% of the width and therefore, we could easily fix this

155
00:11:17,150 --> 00:11:20,240
issue and make sure that our page,

156
00:11:20,240 --> 00:11:23,100
well as I think, already looks a lot better.

157
00:11:23,210 --> 00:11:29,180
There is another problem though before we finished this customers page for now, because if we increase

158
00:11:29,180 --> 00:11:35,060
the size of our website, as you can see it right here, I think there was a point where it doesn't look

159
00:11:35,060 --> 00:11:38,430
good anymore and I would say this point is reached right here,

160
00:11:38,450 --> 00:11:44,870
let's say at around about maybe 1500 pixels. I think this looks still nice but then

161
00:11:44,870 --> 00:11:50,040
if it gets pulled apart further, it doesn't look good anymore

162
00:11:50,330 --> 00:11:57,260
and we also learned how we can solve such a problem, because we basically only need to make sure that

163
00:11:57,260 --> 00:11:58,740
the testimonial class,

164
00:11:58,760 --> 00:12:05,630
so this one right here which basically contains, as we can see it, the images and the text, so right here

165
00:12:05,780 --> 00:12:08,870
and right there, both times we have this testimonial class.

166
00:12:08,930 --> 00:12:15,620
So if we would give this container a maximum width of this 1500 pixels, then we

167
00:12:15,620 --> 00:12:20,030
could ensure that the page gets not pulled apart too far.

168
00:12:20,030 --> 00:12:26,630
Therefore let's go back to the testimony class and also add the max width property right here with

169
00:12:26,720 --> 00:12:29,190
1500 pixels.

170
00:12:29,210 --> 00:12:36,440
Now just in case you wonder why we're using pixels this time, the more consistent approach would of course

171
00:12:36,440 --> 00:12:38,090
be using rem right here

172
00:12:38,300 --> 00:12:45,230
but as we only applied rem so far for our media queries and I would also like to show you that you can use

173
00:12:45,230 --> 00:12:46,090
pixels there,

174
00:12:46,100 --> 00:12:48,710
it's not what I recommend but it's what you can do,

175
00:12:48,950 --> 00:12:52,940
I think it makes sense to use the 1500 pixels right here.

176
00:12:52,970 --> 00:12:59,150
As I said, this is more the demonstration purpose right here not the real consistency approach that we

177
00:12:59,150 --> 00:13:05,390
would normally follow when creating our responsive website. If we do that and reload the page, we can

178
00:13:05,390 --> 00:13:08,600
see that it keeps moving the way we had it before

179
00:13:08,600 --> 00:13:13,860
but as soon as we reach the 1500 pixels, it is stuck right here.

180
00:13:13,910 --> 00:13:19,070
The problem still is that it's kind of stuck in a strange way because the distance increases to the

181
00:13:19,070 --> 00:13:21,360
right of John Mellow right here

182
00:13:21,380 --> 00:13:27,530
but Mike Statham, our first testimonial is stuck to this left side and this issue can also be quickly

183
00:13:27,530 --> 00:13:30,250
solved if we just change our margin right here,

184
00:13:30,290 --> 00:13:35,230
so this one, the top and bottom margin is fine but we should simply use our margin

185
00:13:35,240 --> 00:13:38,590
auto trick, that's the trick I showed you in the units module

186
00:13:38,600 --> 00:13:41,970
and as you can see, we can apply it once again right here.

187
00:13:42,270 --> 00:13:49,290
If I now reload the page, we can see that we now have a really good status for our customers page.

188
00:13:49,490 --> 00:13:53,790
We have the starting situation right here with the mobile view,

189
00:13:53,810 --> 00:13:58,550
I think this little gap right here and right there is totally fine, that's simply due to the margin that we

190
00:13:58,550 --> 00:14:03,830
have right here on top of our first testimonial class and right here on top of the footer

191
00:14:03,920 --> 00:14:10,540
but I think this is OK to keep this little distance and if we then come to our 640 pixels breaking point,

192
00:14:10,940 --> 00:14:18,310
it jumps immediately to the desktop view and it gets bigger and bigger up to the point where we reach

193
00:14:18,490 --> 00:14:21,090
our 1500 pixels width

194
00:14:21,280 --> 00:14:24,880
and with that, it also looks nice on bigger screens.

195
00:14:25,180 --> 00:14:28,120
And with that, our customers page looks good,

196
00:14:28,120 --> 00:14:31,480
we now have a really nice responsive design.

197
00:14:31,480 --> 00:14:36,780
The problem though is that if I look back to our packages page which looks actually fine,

198
00:14:37,000 --> 00:14:41,510
I think if we are honest, we should also set a limit to the width

199
00:14:41,560 --> 00:14:47,580
these packages can have because I think also from this 1500 pixels on,

200
00:14:47,590 --> 00:14:50,930
so right here, it shouldn't be able to increase anymore.

201
00:14:51,130 --> 00:14:56,000
So let's implement that fix to our packages page in the next lecture.