REVISED 1 After receiving feedback, I made the following changes:
.lower-container {
justify-content: center;
position: absolute;
width: 92vw;
// height: 46vh; <--- no set height
/* nested classes for adjusting position and height of lower-container */
.lower-container.lower-full {
height: 92vh;
top: 0;
}
.lower-container.lower-mid {
height: 46vh;
top: 46vh;
}
.lower-container.lower-closed {
height: 1vh;
top: 91vh;
}
}
When inspecting in the Elements Panel: https://i.stack.imgur.com/e2u8N.png
However, in the Styles panel, there is a discrepancy: https://i.stack.imgur.com/U22sQ.png
Despite applying the additional class, the height is not being adjusted and the new class isn't visible in the styles.
Initial Inquiry I have defined some nested classes like this:
.lower-container {
height: 46vh;
display: flex;
justify-content: center;
...
.lower-full {
height: 92vh;
}
}
Then, when trying to change the height, I am executing:
lowerContainerElement.classList.add('lower-full')
However, upon checking the console, the element does not reflect the .lower-full style in the Styles panel, even though the Elements panel displays class="{other classes} lower-full"
What could be the issue here?