html - resizing the image within the table in mobile query doesn't work -

i have image inside table's <td> want resize if screen size in mobile size. added viewport. mobile query works fine in other's purpose except img. here html:

<table class="table borderless">       <tr>       <td align="center" width="10%"> <img width="55%" class="img" src="images/save energy.png"></td>       <td><h4>save on energy costs</h4>           <p class="pindent">test test test test test test test test test</p>       </td>       </tr>       <tr>       <td align="center" width="10%"> <img width="55%" class="img" src="images/save environment.png"></td>       <td><h4>save environment</h4>           <p class="pindent">test test test test test test</p>       </td>       </tr>       </table> 

here mobile query css :

@media (max-width: 600px) {     table {         width:95%;     }     .custom-box{         margin-left: 10px;         margin-right: 10px;     }     .margin-box {         padding-bottom: 10px;     }     .cust-box {     margin-left: 0px;     }     .carousel-inner{      max-height: 500px !important;     }     .img {     max-width: 100% !important;     height: auto;     border-radius: 50%;     -webkit-transition: -webkit-transform .8s ease-in-out;     -moz-: -moz-transform .8s ease-in-out;     transition: transform .8s ease-in-out;     }     .img:hover {     -webkit-transform: rotate(360deg);     -moz-: rotate(360deg);;     transform: rotate(360deg);     }  } 

i don't understand mean i want resize it , guess want make 100% not 55% how it's set in inline css

so in media query add width:100% on the .image overwrite width:55% .

or can set whatever width want image

see snippet below or fiddle here

@media (max-width: 600px) {      table {          width:95%;      }      .custom-box{          margin-left: 10px;          margin-right: 10px;      }      .margin-box {          padding-bottom: 10px;      }      .cust-box {      margin-left: 0px;      }      .carousel-inner{       max-height: 500px !important;      }      .img {      max-width: 100% !important;      height: auto;      border-radius: 50%;      -webkit-transition: -webkit-transform .8s ease-in-out;      -moz-: -moz-transform .8s ease-in-out;      transition: transform .8s ease-in-out;      width:100%!important;      }      .img:hover {      -webkit-transform: rotate(360deg);      -moz-: rotate(360deg);;      transform: rotate(360deg);      }   }

<table class="table borderless">        <tr>        <td align="center" width="10%"> <img width="55%" class="img" src="http://placehold.it/350x150"></td>        <td><h4>save on energy costs</h4>            <p class="pindent">test test test test test test test test test</p>        </td>        </tr>        <tr>        <td align="center" width="10%"> <img width="55%" class="img" src="http://placehold.it/350x150"></td>        <td><h4>save environment</h4>            <p class="pindent">test test test test test test</p>                   </td>        </tr>        </table>

or make td in image located, bigger , image bigger

see snippet below or fiddle here

@media (max-width: 600px) {      table {          width:95%;      }      .custom-box{          margin-left: 10px;          margin-right: 10px;      }      .margin-box {          padding-bottom: 10px;      }      .cust-box {      margin-left: 0px;      }      .carousel-inner{       max-height: 500px !important;      }      .img {      max-width: 100% !important;      height: auto;      border-radius: 50%;      -webkit-transition: -webkit-transform .8s ease-in-out;      -moz-: -moz-transform .8s ease-in-out;      transition: transform .8s ease-in-out;      width:100%!important;      }      .img:hover {      -webkit-transform: rotate(360deg);      -moz-: rotate(360deg);;      transform: rotate(360deg);      }       td:first-child { width:40%}  }

<table class="table borderless">        <tr>        <td align="center" width="10%"> <img width="55%" class="img" src="http://placehold.it/350x150"></td>        <td><h4>save on energy costs</h4>            <p class="pindent">test test test test test test test test test</p>        </td>        </tr>        <tr>        <td align="center" width="10%"> <img width="55%" class="img" src="http://placehold.it/350x150"></td>        <td><h4>save environment</h4>            <p class="pindent">test test test test test test</p>                   </td>        </tr>        </table>