Media queries, Table cant be responsive? - css

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><button class="button10">Úloha 1<p></p></button></p>
<p><button class="button10">Úloha 2<p></p></button></p>
<p><button class="button10">Úloha 3<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><button class="button10">Úloha 1<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/

Answer 2

Tables are notoriously difficult to work with responsively, as they're not designed to scale. What I would recommend is switching the display of the table at smaller widths so that it is comprised of block-level elements:
#media only screen and (max-width: 360px) {
table, td, tr {
display: block;
width: 100%;
}
}
Using display: block will allow you to manipulate the tables content to your liking. The code above makes each row occupy 100% of the screen width at less than 360px. Feel free to adjust the widths or even float them in order to modify the layout to your liking.
Note that in the following example I've modified the media query width to 700px in order to demonstrate this in a snippet. Snippets also can't include Twitter timelines. For a full example in a resizable window, check out this JSFiddle.
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%;
}
}
/* New */
#media only screen and (max-width: 700px) {
table,
td,
tr {
display: block;
width: 100%;
}
}
<table id="hlstr">
<tr>
<td>
<h2>Agentura Martina Podleďešáka</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>
<td>
<h2>Co děláme?</h2>
<p>
<button class="button10">Úloha 1
<p></p>
</button>
</p>
<p>
<button class="button10">Úloha 2
<p></p>
</button>
</p>
<p>
<button class="button10">Úloha 3
<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>
Hope this helps! :)