Improve CSS media queries

[yangshun]

Motivation

Realized that the CSS of the site was using device-width media queries, which is deprecated. Use of device-width is not encouraged because it uses the hardware width rather than the viewport width.

This Stack Overflow thread explains well why it's a bad idea:

If your resolution is large enough to get you in one break point, but the width of the browser is small enough to get you in another one, you'll end up with an odd combination of both.

In fact, the site is already suffering from this bug, for example, for the mobile web version of the installation page, the "Edit" button is shown even though it's not supposed to, going by the media query:

@media only screen and (min-device-width: 360px) and (max-device-width: 735px) {
  a.edit-page-link.button {
    display: none;
  }
}

I replaced all device-width with the width variants and removed redundant min-widths. Having the min-width breakpoint does not make much sense because there are is no CSS written to handle the widths smaller than the ones the CSS currently has.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Loaded the page on Chrome Devtools Pixel 2 resolution and navigated all the pages. No visible issues found.

Related PRs

None

[JoelMarcey]

Thank you!