Setting the width of a <div> when resizing the window

Question

So I got this application in Vuejs that is divided with css grid into 3 divs basically: a sidebar , a configpanel and a preview . I would like to set the width of the preview div in the px unit according to the current screen size and when the screen gets resized

For clarification, I made a gif of a website that does pretty much EXACTLY what I want: https://gyazo.com/d667756474e7f4fa18e2d5d64a0dee5a

As you can see in the gif, every time the screen gets resized, the particular <div> gets assigned a new class for some reason (no idea why or how) and the div's width automatically gets updated with a new px value.

At first I thought I could do something like this in the created() hook:

window.addEventListener("resize", () => {
  let preview = window.document.querySelector(".preview");
  preview.style.width = `${preview.offsetWidth}px`;
});

But that doesn't work.

I got a really simple sample project set up in a codesandbox here .

Ideally, I would like to know how to dynamically set the width in pixels like the website does in the gif.

Additionally, just out of curiosity, I would like to know why and how that particular website generates a new class every time the screen gets resized (I've seen it a couple of times now and I wonder what it is).

Answer 1

If I have known what you mean correctly, your solution can be the code below (Add code below to your CSS file and add every class you want to it):

@media screen and (max-width: 750px) {
  .selector {
    some code here...
  }
}

The code above will apply the styles defined to elements selected when the width of the device screen is 750 pixels or less.