I am facing a challenge where I want the width of my .container element to be 100% when the screen size reaches 900px. The issue is that I have used .container on multiple pages and only wish to change its appearance within the #sub-top div.
The terminology surrounding this is quite tricky for me, but I believe this explanation comes close to what I am trying to achieve.
Below, you can see my attempt at modifying the .container class to expand to 100% instead of 85% when the screen size is 900px or less.
@media
.container{
width: 85%;
height: auto;
}
#sub-top{
background-color: gray;
height: auto;
}
@media (min-width: 900px) {
#sub-top .container {
width: 100% !important;
height: auto;
}
}<div id="sub-top">
<div class="container">
<div class ="content">
<p> HERE IS CONTENT </p>
</div>
</div>
</div>