fix: device query max-width

[jorgearturonh]

Description

Modified max-width media queries, I had the major issue that I couldn't differentiate between LG and XL screens, causing problems to query between those.

I would recommend that we include a way of changing these dynamically by theme props, allowing users to even add furthermore screens types, etc. See Media query issue

How Has This Been Tested?

• Tested that changes allow you to detect displays for mobile, tablet, LG, and XL desktop screens.
• This has been tested into some work projects I'm in that are in production with decent userbase, allowing me to create responsive websites for most devices.

Screenshots:

Example code:

class App extends Component {
  render() {
    return (
      <StyletronProvider value={engine} debug={debug} debugAfterHydration>
        <ThemeProvider theme={theme}>
          <StyleReset />

          <Div
            textColor="green"
            minH="100vh"
            w="100vw"
            d="flex"
            flexDir="column"
            justify="center"
            align="center"
            textSize="display2"
            fontFamily="secondary"
            d={{ xs: 'flex', md: 'none' }}
            textWeight="500"
            p={{ x: '1rem', y: '4rem' }}
          >
            XS Display Message
          </Div>
          <Div
            textColor="red"
            minH="100vh"
            w="100vw"
            d="flex"
            flexDir="column"
            justify="center"
            align="center"
            textSize="display2"
            fontFamily="secondary"
            d={{ lg: 'none', md: 'flex' }}
            textWeight="500"
            p={{ x: '1rem', y: '4rem' }}
          >
            MD Display Message
          </Div>
          <Div
            textColor="blue"
            minH="100vh"
            w="100vw"
            d="flex"
            flexDir="column"
            justify="center"
            align="center"
            textSize="display2"
            fontFamily="secondary"
            d={{ lg: 'flex', xl: 'none' }}
            textWeight="500"
            p={{ x: '1rem', y: '4rem' }}
          >
            LG Display Message
          </Div>
          <Div
            textColor="purple"
            minH="100vh"
            w="100vw"
            d="flex"
            flexDir="column"
            justify="center"
            align="center"
            textSize="display2"
            fontFamily="secondary"
            d={{ lg: 'none', xl: 'flex' }}
            textWeight="500"
            p={{ x: '1rem', y: '4rem' }}
          >
            XL Display Message
          </Div>
        </ThemeProvider>
      </StyletronProvider>
    );
  }
}

Visual state with changes

Visual state without changes

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [x] Breaking change (fix or feature that would cause existing functionality to change)

Risks

This could change how other websites are shown, especially if they had LG and XL tags that were undetected before.