ShinoLexTazy ShinoLexTazy - 12 days ago 7
CSS Question

Changing Content on screen Size

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>


and I also write this to my class page

@media screen and (max-width: 500px) {
.deneme{
background-image: url(bannerpic.png);
}
}


When I use background-color: red for an example it work well. It's actually working this way but the problem is I want to clean the header and show ONLY the bannerpic when my width value is lower then 500 instead of that when I use the codes I write up here it showes me something like this

http://puu.sh/swfNa/16cb398a98.jpg

all I want it if my width value is lower then 500 show ONLY the image no text :)

Answer

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