Width of Screens

Designing for various windows sizes can be challenging. One way to get around this is by using JavaScript.

<script>
alert(window.outerWidth+’ x ‘+window.outerHeight);
</script>

Same can be done in React.js applications.

class Main extends React.Component {
 constructor(props) {
    super(props);
    this.state = { windowWidth: window.innerWidth };
  }

 const handleResize = (e) => {
  this.setState({ windowWidth: window.innerWidth });
 };

 componentDidMount() {
  window.addEventListener("resize", this.handleResize);
 }

 componentWillUnMount() {
  window.addEventListener("resize", this.handleResize);
 } 

  render() {
    const { windowWidth } = this.state; 
    return <div>Current window width: {windowWidth}</div>
  }
}

Considering a max break point can help completely getting around dynamically calculating window sizes.

Consider accessing the entire view port using CSS for bigger screens too.

hp-content {
    display: block;
    width: 100vw;
    height: 100vh;
}