Media queries, Table cant be responsive?

Question

The webmaster tools says that the table TD,TH has 100% at 360px Screen and smaller, but it doesnt appear like that. Where is my problem? Thank you for advice. For test of the thing live, you can visit the website where I am trying to make it. http://martinpodlesak.com/test4/ my code:

<table id="hlstr">
        <tr>
            <td>
                <h2>Agentura Martina Podleďešáka</2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <p>Vestibulum justo nibh, pharetra vitae commodo eget, hendrerit sed velit.</p>
                    <p>Vestibulum sapien orci, aliquet rhoncus lacus ac, rutrum laoreet nunc. </p>
                    <p> Mauris viverra luctus volutpat. Praesent erat sem, luctus ac ornare ut, molestie eu quam.</p>
            <td>
                <h2>Co děláme?</h2>
                   <p><a href="http://www.google.com/"></a><button class="button10"><a href="#">Úloha 1</a><p></p></button></p>
                   <p><a href="http://www.google.com/"></a><button class="button10"><a href="#">Úloha 2</a><p></p></button></p>
                   <p><a href="http://www.google.com/"></a><button class="button10"><a href="#">Úloha 3</a><p></p></button></p>
                   <p></p>
            </td>        
            <td> 
                <a class="twitter-timeline" data-lang="cs" data-width="315" data-height="300" href="https://twitter.com/podlesakmartin">Tweets by podlesakmartin</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
            </td>
        </tr>


    </table>

CSS

    table#hlstr td, th
    {
      width: 30%;
    }
    table#hlstr h2 {
        font-size: 15px;
    }

    table#hlstr p {
    font-size: 12px;}
@media only screen and (max-width: 360px) {
    button.w3-button.demo {height: 29.3px;}
    table#hlstr td,th {width: 100%;}

}

Answer 1

If you absolutely must use a table for layout... which is NEVER the case, then you'll have to tell the table to be display: block; instead of display: table; A table cell will try and maintain its form and allow ALL of the cells to fit. If you want to force it to behave differently, then you'll have to tell it not to be a table. Not just the table, but it's children. Sounds silly, right? That is because this would be a strange way to get the layout you are going for.

<p><a href="http://www.google.com/"></a><button class="button10"><a href="#">Úloha 1</a><p></p></button></p>

p > link with nothing... and a button w/ a link inside it and then another paragraph... I think this spot needs another look.

I urge you to think about it like this:

markup

<section class='my-meaningfully-named-section'>

  <div class='some-copy'>
    <h2>Some copy</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vestibulum justo nibh, pharetra vitae commodo eget, hendrerit sed velit.</p>
    <p>Vestibulum sapien orci, aliquet rhoncus lacus ac, rutrum laoreet nunc. </p>
    <p>Mauris viverra luctus volutpat. Praesent erat sem, luctus ac ornare ut, molestie eu quam.</p>
  </div>

  <div class='some-buttons'>
    <h2>Some buttons</h2>
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
  </div>

  <div class='twitter-stuff'>
    <h2>Twitter stuff</h2>
    <a class="twitter-timeline" data-lang="cs" data-width="315" data-height="300" href="https://twitter.com/podlesakmartin">Tweets by podlesakmartin</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>

</section>

styles

/* all the divs are already 100% width... because they are block-level elements */

.my-meaningfully-named-section .some-copy {
  background: red;
}
.my-meaningfully-named-section .some-buttons {
  background: lightblue;
}
.my-meaningfully-named-section .twitter-stuff {
  background: yellow;
}



@media (min-width: 600px) { /* break-point-1 */

  .my-meaningfully-named-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .my-meaningfully-named-section .some-copy {
    flex-basis: 100%;
  }
  .my-meaningfully-named-section .some-buttons {
    flex-basis: 50%;
  }
  .my-meaningfully-named-section .twitter-stuff {
    flex-basis: 50%;
  }

}



@media (min-width: 900px) { /* break-point-2 */

  .my-meaningfully-named-section .some-copy {
    flex-basis: 30%;
    flex-grow: 1;
  }
  .my-meaningfully-named-section .some-buttons {
    flex-basis: auto;
  }
  .my-meaningfully-named-section .twitter-stuff {
    flex-basis: 300px;
  }

}

https://jsfiddle.net/sheriffderek/1h9051be/