Thin screen adaptation should happen at a smaller screen size

[PeterJCLaw]

At the moment this seems to transition at around 920 pixels wide, which is well within reach of a desktop display, even with a fully maximised window.

I would suggest that we should keep the desktop layout until down to at most 800 pixels, possibly as low as 600 pixels. (These are based on a feeling for how big desktop screens are, rather than mobile screens.)

[PeterJCLaw]

Particular pages where this looks terrible include:

• https://studentrobotics.org/
• https://studentrobotics.org/events/

[sedders123]

We think this is ok now

[PeterJCLaw]

Are you sure? Here's what the events page looks like for example:

And the homepage:

[sedders123]

Having looked through some sizes using the device toolbar in developer mode, we're wondering if 500px would be ok? Think we should do some playing with this and maybe take a look at what some other sites use for breakpoints

[sedders123]

Other frameworks

Framework	Name of Size	Breakpoint
Bootstrap	X-Small	576px
Bootstrap	Small	768px
Tailwind	Sm	640px
Semantic UI	Mobile	768px
Bulma	Mobile	768px

Highly voted StackOverflow Answer

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

[PeterJCLaw]

I think there's two separate things here:

• picking where the breakpoint should occur
• making sure that the breakpoint makes sense with regard to the designs

Currently the issue as I see it is very much with the latter -- we have a breakpoint which happens well before our designs are really ready for it. This leads to the "thin" design being shown at a width where it looks a bit silly.

While there may be worth some general discussion about updating the designs to change where we want the breakpoint to be, I am expecting that this issue will be most easily fixed by shrinking the breakpoint so that the designs look sensible at each scale.