Making a div responsive

Question

I am trying to get a make a div which contains a set of tools responsive.I have a side menu below this which I have made responsive. Could someone let me know where would this be wrong.

#tools {
  width: 160px;
  position: fixed;
  display: inline-block;
  margin: 0 auto;
  line-height: 1.4em;
}
@media only screen and (max-width: 600px) {
  #tools {
    width: 70%;
  }
}

<div id="tools" style="width: 100%">
  <table>
    <tr>
      <td>
        <input type="text" id="searchInput" placeholder="Type To Filter" ng-model="search" class="searchMenu">
      </td>
      <td id=uploadedit>
        <button id="upload" onclick="insertIntoDatabase()" class="pinColor"><i class="fa fa-upload fa-2"></i>
        </button>
      </td>
      <td id=impledit>
        <button id="implview" onclick="openImplView()" class="pinColor"><i class="fa fa-pencil fa-2"></i>
        </button>
      </td>
      <td>
        <button id="home" class="homeButton"><i class="fa fa-home fa-2"></i>
        </button>
      </td>
      <td>
        <button id="keep-menu-open" class="pinColor" ng-click="openAndFixMenu"><i class="pinColor"></i>
        </button>
      </td>
      <td>
        <button id="open-left" class="toggleButton" ng-click="toggleMenu()"> <i class="fa fa-bars fa-2"></i>
        </button>
      </td>
    </tr>
  </table>
</div>

Answer 1

You have a typo in your media query: it should be # instead of ##. Aside from that, you're declaring width: 100% inline which overwrites whatever you've written in a stylesheet, which is why you don't see the result of the query.

Answer 2

Probably best to take the style="100%" from the div, any inline style like this will over-ride whatever is in the stylesheet.

Also in the media query you have

##tools { width: 70%; }

change to

#tools { width: 70%; }