Sign in

Width of Screens

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

alert(window.outerWidth+’ x ‘+window.outerHeight);

Same can be done in React.js applications.

class Main extends React.Component {
constructor(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;