[Transferred from Web repo] Use consistent media queries for responsive design across different screen widths

[nikitaevg]

Is your feature request related to a problem? Please describe.

There are currently [77 places](https://github.com/search?q=repo%3Aoppia%2Foppia%20%40media(max-width&type=code) which control markdown based on the screen width. They are probably not well synchronized and might work badly with each other.

Describe the solution (or solutions) you'd like

NOTE: that's not a confirmed problem, maybe there's no better solution for this.

1. Unify the condition "is it a mobile page"
2. Look through these places and get rid of unnecessary ones.

Describe alternatives you've considered and rejected

No response

Additional context

No response

[seanlip]

@nikitaevg By "markdown", you mean "media queries", right? Also just a note, your link is not working, did you mean this one?

For the design team -- this is a question from the Web team asking about how we should handle breakpoints. Currently, on Web, there are all sorts of breakpoints at various different screen sizes (1199 px, 1350 px, 1080 px, 641 px, etc.) for different pages and components. We would like to get the design team's advice on whether this should be standardized across all pages, and, if so, what the cutoffs between the different layout widths should be -- do we have a standard for this?

[nikitaevg]

By "markdown", you mean "media queries", right?

Oh, I thought M in html is for "markdown":) Anyway, I just meant "page design", there are 77 places which control page design based on the width

For the broken link, hmm, let's try again, 77 places. Well it works in the preview. Thanks anyway