So i need change blue square element width when my screen size below 520px evry time i am resising the window.
The blue square should get green square width, but green square width style should be in percents.
Nothing works the way i am doing it :(
window.addEventListener('resize', ()=> {
if (screen.width < 520) {
const boxElement = document.getElementsByClassName('box')[0].clientWidth,
changingElement = document.getElementsByClassName('changing__width__element')[0];
changingElement.style.width = `${boxElement}px`;
}
}, true);body,html{
width: 100%;
height: 100%;
}
.box{
width: 80%;
height: 80%;
left: 10%;
top: 10%;
background: lime;
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.changing__width__element{
width: 50px;
height: 50px;
background: blue;
position: relative;
}<body>
<div class="box">
<div class="changing__width__element"></div>
</div>
</body>