0

Is there any functionality similar to @media queries in CSS to dynamically change the styling AND works in a element?

I wrote the media queries to hide certain elements if the available width is too low, but when I place these elements in a div, the elements that are supposed to hide show up.

When I searched in similar posts, it looks like @media queries only work with screen size, but I have not found a solution to this question.

I cannot show the exact code I am using (due to proprietary concerns), but this is pretty much the structure.

@media (max-width: 1124px) {
 th.longColTH {
  display: none;
  visibility: hidden;
 }
}
<div class="skPane" id="SkinPaneLeft" style="width: 1081px;">
  <table class="skTbl" id="SOMETABLE12345" style="border: 1px solid rgb(204, 204, 204); table-layout: fixed;">
    <thead>
      <tr class="colHdr">
        <th class="longColTH">I hide some times</th>
      </tr>
    </thead>
    <tbody>
        <!-- Some content here -->
    </tbody>
  </table>
</div>

Since the div element only has a width of 1081px, I want the table header column to hide, but I cannot find a way to do that.

SSP
  • 9
  • 2
  • 4
    No such feature exists. – SLaks Oct 21 '14 at 21:37
  • they should not appear as a result of placing them inside another div. Perhaps the selectors are not mathcing the elements after you put them in the divs. You will have to show some CSS and media queries you use, along with the relevant HTML for more help – Gabriele Petrioli Oct 21 '14 at 21:42
  • Updated the code sample. – SSP Oct 22 '14 at 15:12
  • just tested your snippet, and really works 100% fine. test here: http://jsfiddle.net/fa5jv6mb/embedded/result/ – dippas Oct 22 '14 at 15:22
  • 1
    possible duplicate of [Can media queries resize based on a div element instead of the screen?](http://stackoverflow.com/questions/12251750/can-media-queries-resize-based-on-a-div-element-instead-of-the-screen) –  Oct 22 '14 at 16:13
  • Also see http://stackoverflow.com/questions/14475997/css3-media-query-width-of-container-rather-than-screen. –  Oct 22 '14 at 16:14

0 Answers0