Changing Content on screen Size

Question

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 1

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