I am using display: flex for a container (.zone-container) to position the children. However, I am applying position: absolute to one of the children (#camp-zone) in order to place it on top of the other children. I want to remove the position: absolute from the child element in the media query and apply the same style for all the children (except for background-color). I have tried to set position to static in the media query for both the element that has position: absolute and the container that has position: relative but the child element continues to have different style compared to the other children. How do I unset 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;
}
#camp-zone {
justify-content: center;
background-color: green;
justify-self: center;
position: absolute;
z-index: 0;
bottom: 0;
right: 0;
width: 44%;
height: 33%;
min-width: 32vh;
min-height: 27vh;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
left: 0;
top: 0;
}
.activity-container {
margin: 0;
max-width: 73vh;
display: flex;
flex-wrap: wrap;
width: 40%;
}
.activity {
background-color: #3260a8;
margin: 17px;
display: flex;
justify-content: center;
cursor: pointer;
width: 140px;
height: 87px;
}
.activity-concentration {
background-color: orange;
margin: 17px;
display: flex;
justify-content: center;
color: white;
width: 140px;
height: 87px;
}
.activity-communication {
background-color: yellow;
margin: 17px;
display: flex;
justify-content: center;
width: 140px;
height: 87px;
}
.activity-chill-out {
background-color: pink;
margin: 17px;
display: flex;
justify-content: center;
width: 140px;
height: 87px;
}
.activity-camp {
background-color: green;
margin: 17px;
display: flex;
justify-content: center;
color: white;
width: 140px;
height: 87px;
}
.activity p {
color: white;
}
@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 >
<h2>Click on an activity box to see which area it belongs to</h2>
</section>
<section >
<div >
<div >
<div id="concentration-zone">
<p>Concentration</p>
</div>
<div id="communication-zone">
<p>Communication</p>
</div>
<div id="collaboration-zone">
<p>Collaboration</p>
</div>
<div id="chill-out-zone">
<p>Chill Out</p>
</div>
<div id="camp-zone">
<p>Camp</p>
</div>
</div>
<div >
<button activitytype="concentration">
<p>Code</p>
</button>
<button activitytype="communication">
<p>Teams Meeting</p>
</button>
<button activitytype="camp">
<p>Make a phone call</p>
</button>
<button activitytype="collaboration">
<p>Work shops with colleagues</p>
</button>
<button activitytype="chillout">
<p>Coffee break</p>
</button>
<button activitytype="collaboration">
<p>Lively discussions/brainstorming</p>
</button>
<button activitytype="camp">
<p>Long group work</p>
</button>
<button activitytype="collaboration">
<p>Creative zone for problem solving</p>
</button>
<button activitytype="concentration">
<p>Concentrate on task</p>
</button>
<button activitytype="communication">
<p>Not bothered by phone calls/chatting</p>
</button>
<button activitytype="collaboration">
<p>Collaboration & Planning</p>
</button>
<button activitytype="chillout">
<p>Coffee break with groups</p>
</button>
<button activitytype="collaboration">
<p>Prepare a presentation together</p>
</button>
<button activitytype="communication">
<p>Think for yourself</p>
</button>
<button activitytype="collaboration">
<p>Meeting with no sensitive info</p>
</button>
<button activitytype="collaboration">
<p>Quick, spontaneous meetings</p>
</button>
<button activitytype="communication">
<p>Have a chat without disturbance</p>
</button>
<button activitytype="camp">
<p>Room for external/internal parties</p>
</button>
<button activitytype="communication">
<p>Private dialogue</p>
</button>
<button activitytype="communication">
<p>Read a contract in silence</p>
</button>
<button activitytype="concentration">
<p>Individual work without disturbance</p>
</button>
<button activitytype="communication">
<p>Check e-mails</p>
</button>
<button activitytype="concentration">
<p>Calm & quiet work space</p>
</button>
<button activitytype="chillout">
<p>Hangout with colleagues outside project</p>
</button>
<button activitytype="communication">
<p>Plan work</p>
</button>
<button activitytype="communication">
<p>Lead employees/team</p>
</button>
<button activitytype="concentration">
<p>Analyze data</p>
</button>
<button activitytype="concentration">
<p>Rest</p>
</button>
<button activitytype="chillout">
<p>Chat with a colleague about weekend plans</p>
</button>
<button activitytype="collaboration">
<p>Discuss solutions for challenges in projects</p>
</button>
<button activitytype="chillout">
<p>Pause from work</p>
</button>
<button activitytype="camp">
<p>Private room for team/project for a long time</p>
</button>
<button activitytype="chillout">
<p>Coffee with colleagues</p>
</button>
<button 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>CodePudding user response：
Kindly change your CSS to this. The code in @media (min-width: 767px){} only applies to screens that are larger than 767px. Smaller screens (e.g. @media (max-width: 768px){}) will completely ignore it.
.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;
}
#camp-zone {
background-color: green;
}
.activity-container {
margin: 0;
max-width: 73vh;
display: flex;
flex-wrap: wrap;
width: 40%;
}
.activity {
background-color: #3260a8;
margin: 17px;
display: flex;
justify-content: center;
cursor: pointer;
width: 140px;
height: 87px;
}
.activity-concentration {
background-color: orange;
margin: 17px;
display: flex;
justify-content: center;
color: white;
width: 140px;
height: 87px;
}
.activity-communication {
background-color: yellow;
margin: 17px;
display: flex;
justify-content: center;
width: 140px;
height: 87px;
}
.activity-chill-out {
background-color: pink;
margin: 17px;
display: flex;
justify-content: center;
width: 140px;
height: 87px;
}
.activity-camp {
background-color: green;
margin: 17px;
display: flex;
justify-content: center;
color: white;
width: 140px;
height: 87px;
}
.activity p {
color: white;
}
@media (min-width: 767px) {
#camp-zone {
justify-content: center;
justify-self: center;
position: absolute;
z-index: 0;
bottom: 0;
right: 0;
width: 44%;
height: 33%;
min-width: 32vh;
min-height: 27vh;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
left: 0;
top: 0;
}
}
@media (max-width: 768px) {
.game-area {
min-height: 150vh;
}
.header h2 {
margin: 15px;
font-size: 30px;
}
.zone {
width: 220px;
height: 180px;
}
}