I need to resize an image inside a table's <td> when the screen size is in mobile mode. Although I have already added a viewport, my mobile query works correctly for other purposes except for the image. Here is the HTML code:
<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>
Below is the CSS code for my mobile query:
@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);
}
}