Setting the width of a <div> when resizing the window
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).
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 classes 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.
Hope I could help you.
