I have set the display property to flex for a container (.zone-container) to organize its children. However, I have used position: absolute on one of the children (#camp-zone) to stack it on top of the other children. In my media query, I want to remove the position: absolute from this child element and apply the same style as the other children (excluding background-color). I attempted to change the position to static in the media query for both the child with position: absolute and the parent container with position: relative, but the child element still appears differently compared to the rest. How can I reset the specific styling in the media query?
.header {
background-color: navy;
min-height: 7vh;
display: grid;
}
.header h2 {
color: white;
text-align: center;
font-size: 45px;
font-weight: inherit;
font-family: arial;
}
.game-area {
display: flex;
justify-content: flex-start;
width: 100%;
background-color: navy;
height: 100%;
min-height: 1000px;
}
.activity-zone-container {
display: flex;
}
.zone-container {
display: flex;
flex-wrap: wrap;
max-width: 120vh;
position: relative;
max-height: 95vh;
margin: 0%;
}
.zone {
min-width: 32vh;
min-height: 27vh;
margin: 15px;
display: flex;
justify-content: center;
align-items: center;
width: 44%;
height: 33%;
max-height: 300px;
}
.zone p {
color: white;
text-align: center;
margin-bottom: 15px;
font-family: arial;
}
#concentration-zone {
background-color: orange;
}
#communication-zone {
background-color: yellow;
}
#communication-zone p {
color: black;
}
#collaboration-zone {
background-color: #3260a8;
}
#chill-out-zone {
background-color: pink;
}
#chill-out-zone p {
color: black;
}
...
@media (max-width: 768px) {
.game-area {
min-height: 150vh;
}
.header h2 {
margin: 15px;
font-size: 30px;
}
.zone {
width: 220px;
height: 180px;
}
#camp-zone {
position: static;
width: unset;
height: unset;
margin-top: unset;
justify-content: unset;
justify-self: unset;
z-index: unset;
bottom: unset;
right: unset;
width: unset;
height: unset;
min-width: unset;
min-height: unset;
margin-left: unset;
margin-right: unset;
margin-bottom: unset;
left: unset;
top: unset;
}
<html lang
<body>
<div id="app">
<section class="header">
<h2>Click on an activity box to see which area it belongs to</h2>
</section>
<section class="game-area">
<div class="activity-zone-container">
<div class="zone-container">
<div class="zone" id="concentration-zone">
<p>Concentration</p>
</div>
<div class="zone" id="communication-zone">
<p>Communication</p>
</div>
...
...
<button class="activity" activitytype="chillout">
<p>Networking</p>
</button>
</div>
</div>
</section>
</div>
<script src="index.js" type="text/javascript"/>
<script src="/static/js/bundle.js"/>
<script src="/static/js/0.chunk.js"/>
<script src="/static/js/main.chunk.js"/>
</body>
</html>