Jc John Jc John -4 years ago 88
CSS Question

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

I have an image inside the table's

<td>
i want to resize it if the screen size is in mobile size. Also i already added viewport. My mobile query works fine in other's purpose except the img.
Here is my 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 the Environment</h4>
<p class="pindent">TEST TEST TEST TEST TEST TEST</p>
</td>
</tr>
</table>


Here is my 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);
}
}

Answer Source

i don't really understand what you mean by i want to resize it , but i guess you want it to make it 100% not 55% how it's set in the inline CSS

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

or you can set whatever width you want to the 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 the Environment</h4>
          <p class="pindent">TEST TEST TEST TEST TEST TEST</p>
         
      </td>
      </tr>
      </table>

or you could make the td in which the image is located, bigger and so the image will get 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 the Environment</h4>
          <p class="pindent">TEST TEST TEST TEST TEST TEST</p>
         
      </td>
      </tr>
      </table>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download