So back in our code, here in the start game screen which is the first screen we see,
we could already see that our two buttons - reset and confirm also weren't positioned that great
in our button container.
So let's have a look at the styling we set up down there and what we can see here is that we assign
the width of 100% on the button container
but what's this size referring to?
Well this size on this view here, of course if we say 100%, in the end refers to the surrounding
parent which in this case is this card, this input container
and on this input container, we actually set a width of 300 and that simply is too small, combined with
our buttons which we have a fixed width of 100, we get this look which we don't want, which we by
the way can see if we change something so that our app rebuilds and therefore restarts,
then we see that start screen again, here
that's the look we don't want.
So what do we want here?
Well maybe we don't want the width of 300 here but a more flexible width. We're setting a max
width of 80%, what we could do here is we could always set a width of let's say 80 or 90%
and simply make sure that this should always have a min width of 300, so that we always have at least this
many pixels in case we have a small device where 80% would be less than that and that we have at
least this and now this would look better here.
Why?
Because now we have 80% as a default
and prior to that, we had it as a max width.
So now by setting it to a default, this ensures that this is not our limit,
instead it's our default size
but we also set up that we want to have a min width of 300. On this small device,
this min width is overruling our default width because 80% would actually be less than 300 on
this small device.
Now of course, you could have an even smaller device where this rule however leads to an issue where min
width of 300 basically means that your device is smaller than that, it's not wide enough and
therefore, your container would go beyond the boundaries of our screen.
So this still might not be the perfect rule but it's certainly better as we can see here because on
the bigger screen, this still looks good here on the iPhone, on the smaller screen, this now also
looks good.
Now to ensure that we never leave our boundaries, we can also set a max width and set this to let's say
95% so that we have at least a little bit of spacing around it.
Now we ensure that our container never will go outside of our screen but it tries to take 80%
but in case we have a super small screen, it will take 300
but again, never more than 95% of the available width.
So now we simply set up more flexible rules here which work on a broader range of devices which
as you can tell is a bit better here.