How do I resize text inside a table using media queries?

Question

I have this html

<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/newcss.css"/>

...

<table>
  <tbody>
    <tr>
      <td>General Inquiries:</td>
      <td>Email@email.com</td>
    </tr>
    <tr>
      <td>Phone:</td>
      <td>#########</td>
    </tr>
    <tr>
      <td>Mailing address:</td>
      <td>123 Some St. 123 456</td>
    </tr>
  </tbody>
</table>

and this css

table {
    border-collapse: collapse;
    font-size: 34px;
    color: white;
    margin: 15px;
    width: 90%;
}

td {
    padding: 0px 10px;
}

@media (max-width: 730){
    table, tr, td, tbody, thead {
        font-size: 14px;
    }
}

However, when I resize the window to below 730, the font size does not change on any of the elements listed in the media query. Any Ideas?

May be it's helpful for you https://stackoverflow.com/questions/15649244/responsive-font-size — A.A Noman, Nov 16 '17 at 17:39
thanks guys love you all, I forgot the px, stupid mistake lol — dan y, Nov 17 '17 at 04:39

score 0 · Answer 1 · answered Nov 16 '17 at 17:40

You simply forgot to add the unit in your max-width statement! Just add px after the number and it will work (click the "View Fullscreen" link below the snippet in order to be able to see the change):

table {
    border-collapse: collapse;
    font-size: 34px;
    color: white;
    margin: 15px;
    width: 90%;
    background: #666; /* added this for the snippet so we can see the text at all */
}

td {
    padding: 0px 10px;
}

@media (max-width: 730px){
    table, tr, td, tbody, thead {
        font-size: 14px;
    }
}

<table>
  <tbody>
    <tr>
      <td>General Inquiries:</td>
      <td>Email@email.com</td>
    </tr>
    <tr>
      <td>Phone:</td>
      <td>#########</td>
    </tr>
    <tr>
      <td>Mailing address:</td>
      <td>123 Some St. 123 456</td>
    </tr>
  </tbody>
</table>

score 0 · Answer 2 · edited Nov 16 '17 at 19:25

0

I think you forgot the px after the 730, so try

@media (max-width: 730px){
    table, tr, td, tbody, thead {
        font-size: 14px;
    }
}

By the way, if possible, don't insert text inside the <td> directly, add a <span> or a <p> to wrap the text inside.

edited Nov 16 '17 at 19:25

J. Titus

9,535
1
32
45

answered Nov 16 '17 at 17:41

Andy

209
2
11

It seems that something got lost when you posted your answer. It's not clear what you're referring to and what OP is supposed to add! – Constantin Groß Nov 16 '17 at 17:49
Good answer, strange advice. There's nothing wrong with inserting text directly into `` tags... – J. Titus Nov 16 '17 at 19:25
@J.Titus I know that, for SEO purposes, is better to wrap the text on the website with a or a
tag. Please correct me if I'm wrong
– Andy Nov 17 '17 at 09:24
Wrapping text in a table has nothing to do with search engine optimization. – J. Titus Nov 17 '17 at 14:53

score 0 · Answer 3 · answered Nov 16 '17 at 17:44

0

you have a mistake in your media query

@media (max-width: 730px){
    table, tr, td, tbody, thead {
        font-size: 14px;
    }
}

answered Nov 16 '17 at 17:44

Jesus Linares

1
3

Hi there, great you're getting involved in answering questions in order to help others. However, this answer would be more helpful if you pointed out the mistake instead of just posting the corrected code. – Constantin Groß Nov 16 '17 at 17:48

How do I resize text inside a table using media queries?

3 Answers3