1
00:00:02,350 --> 00:00:07,180
So back in our code, here in the start game screen which is the first screen we see,

2
00:00:07,370 --> 00:00:13,070
we could already see that our two buttons - reset and confirm also weren't positioned that great

3
00:00:13,160 --> 00:00:14,980
in our button container.

4
00:00:15,080 --> 00:00:21,650
So let's have a look at the styling we set up down there and what we can see here is that we assign

5
00:00:21,650 --> 00:00:24,790
the width of 100% on the button container

6
00:00:24,830 --> 00:00:28,380
but what's this size referring to?

7
00:00:28,400 --> 00:00:34,820
Well this size on this view here, of course if we say 100%, in the end refers to the surrounding

8
00:00:34,820 --> 00:00:38,150
parent which in this case is this card, this input container

9
00:00:38,150 --> 00:00:46,370
and on this input container, we actually set a width of 300 and that simply is too small, combined with

10
00:00:46,370 --> 00:00:52,640
our buttons which we have a fixed width of 100, we get this look which we don't want, which we by

11
00:00:52,640 --> 00:00:58,570
the way can see if we change something so that our app rebuilds and therefore restarts,

12
00:00:58,590 --> 00:01:01,280
then we see that start screen again, here

13
00:01:01,340 --> 00:01:03,530
that's the look we don't want.

14
00:01:03,530 --> 00:01:06,210
So what do we want here?

15
00:01:06,210 --> 00:01:13,500
Well maybe we don't want the width of 300 here but a more flexible width. We're setting a max

16
00:01:13,500 --> 00:01:22,020
width of 80%, what we could do here is we could always set a width of let's say 80 or 90%

17
00:01:23,790 --> 00:01:31,230
and simply make sure that this should always have a min width of 300, so that we always have at least this

18
00:01:31,230 --> 00:01:36,180
many pixels in case we have a small device where 80% would be less than that and that we have at

19
00:01:36,180 --> 00:01:39,750
least this and now this would look better here.

20
00:01:39,750 --> 00:01:40,630
Why?

21
00:01:40,710 --> 00:01:43,520
Because now we have 80% as a default

22
00:01:43,620 --> 00:01:46,070
and prior to that, we had it as a max width.

23
00:01:46,650 --> 00:01:50,280
So now by setting it to a default, this ensures that this is not our limit,

24
00:01:50,280 --> 00:01:51,830
instead it's our default size

25
00:01:51,840 --> 00:01:57,030
but we also set up that we want to have a min width of 300. On this small device,

26
00:01:57,060 --> 00:02:02,760
this min width is overruling our default width because 80% would actually be less than 300 on

27
00:02:02,760 --> 00:02:04,730
this small device.

28
00:02:04,740 --> 00:02:10,200
Now of course, you could have an even smaller device where this rule however leads to an issue where min

29
00:02:10,200 --> 00:02:16,950
width of 300 basically means that your device is smaller than that, it's not wide enough and

30
00:02:16,950 --> 00:02:20,800
therefore, your container would go beyond the boundaries of our screen.

31
00:02:20,820 --> 00:02:26,070
So this still might not be the perfect rule but it's certainly better as we can see here because on

32
00:02:26,070 --> 00:02:30,900
the bigger screen, this still looks good here on the iPhone, on the smaller screen, this now also

33
00:02:30,900 --> 00:02:31,800
looks good.

34
00:02:31,800 --> 00:02:38,730
Now to ensure that we never leave our boundaries, we can also set a max width and set this to let's say

35
00:02:38,970 --> 00:02:42,920
95% so that we have at least a little bit of spacing around it.

36
00:02:42,960 --> 00:02:50,340
Now we ensure that our container never will go outside of our screen but it tries to take 80%

37
00:02:50,670 --> 00:02:53,780
but in case we have a super small screen, it will take 300

38
00:02:53,790 --> 00:02:57,840
but again, never more than 95% of the available width.

39
00:02:58,440 --> 00:03:04,440
So now we simply set up more flexible rules here which work on a broader range of devices which

40
00:03:04,500 --> 00:03:06,390
as you can tell is a bit better here.