Wrapping Custom Content on the Belchertown front page

[MikeQ]

I am using index_hook_after_forecast.inc on the Belchertown front page to add two rows with two columns of METARs (four total METARs).  Here is my .inc file:

<p style="font-size:24px">METARs</p>
<p style="font-size:20px;color:red"><a href="https://www.aviationweather.gov/taf/data?ids=KEUL,KBOI,KWMC,KMEV,KSCK&format=raw&metars=off&layout=on">TAFs</a></p>
<table>
  <tr>
    <td style="padding:10px;vertical-align:top">$KONO_metar</td>
    <td style="padding:10px;vertical-align:top">$KEUL_metar</td>
  </tr>
  <tr>
    <td style="padding:10px;vertical-align:top">$KBOI_metar</td>
    <td style="padding:10px;vertical-align:top">$KMEV_metar</td>
  </tr>
</table>

As you shrink the width of the browser window, the text will wrap in the <td> elements to keep both columns visible in the widow, but not all the way down to iPhone screen size. On an iPhone 7 about half of the right column is cut-off.  The rest of the front page text wraps correctly and remains visible on the iPhone 7.

Anyone know how I should re-write my HTML above so it also wraps properly on an iPhone screen?