I want to change my content inside the header tags when my screen's width value is lower then 500px. So I write this code.
<header>
<table style="width:100%" class="deneme">
<tr>
<td id="baslik" class="logo" width="53%">Some Text Here</td>
<td width="23%"></td>
<td><img src="bannerpic.png" height="115px" width="170px"></td>
</tr>
</table>
</header>
@media screen and (max-width: 500px) {
.deneme{
background-image: url(bannerpic.png);
}
}
if you set table contents to display: none
, so table will not have width
and height
, you can hide table contents by using opacity: 0
or visibility:hidden
, otherwise you need to set a width or height for your table.
@media screen and (max-width: 500px) {
.deneme {
background-image: url("http://puu.sh/swfNa/16cb398a98.jpg");
}
.deneme tr {
opacity: 0;
}
}
<header>
<table style="width:100%" class="deneme">
<tr>
<td id="baslik" class="logo" width="53%">Some Text Here</td>
<td width="23%"></td>
<td>
<img src="bannerpic.png" height="115px" width="170px">
</td>
</tr>
</table>
</header>
enter code here