React: make div take up half the screen

I need to make a site that looks like this one: Right now it sort of looks like that one, but the first div (the one with the background image) doesn´t take up half the height and width of the viewport. Any ideas on how I could fix it?

I’m a bit confused here, the div with the background image is the div containing the hero section? If so, it should occupy the entire width of the screen, not half the width as you mentioned. But I’m not sure if you are referring to that though.

In any case, a good way to control width and height is using vw (for width) and vh (for height) CSS properties. For example, if you want a div to occupy half the height of the screen viewport, then you would set it like this height: 50vh;, same for the width.

edit: I noticed you are already using these properties, and you say the div it’s not taking up half the height of the screen viewport?? It looks like it is to me in the screenshot.

I actually fixed it by adding 100% height and width to the root component (React adds an extra div).

That’s weird, I’ve never had to style the root div to get those results.