pauipauipauipaui pauipauipauipaui - 1 month ago 8
jQuery Question

change class style of parent element in specific div media query

I want my .container element to be at a width of 100% when it reaches a screen size of 900px. The problem is that I use .container on every page and only want to affect the appearance of .container in the #sub-top div.

the hardest thing is terminology for me but i think this is the closest to what i have the ability to describe.

As you can see below, i am trying to get the .container class to go to 100% rather than 85% when it reaches a screen size of 900px or smaller.



@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>









Answer

This works:

  .container {
  width: 85%;
  height: auto;
  background-color: gray;
}

#sub-top {
  height: auto;
}

@media (max-width: 900px) {
  #sub-top .container {
    width: 100% !important;
    height: auto;
  }