AnsweredAssumed Answered

HTML Table not formatting on mobile

Question asked by mdhoover85 on Feb 6, 2016
Latest reply on Feb 23, 2016 by mdhoover85

I recently created a story map journal to showcase some projects I am working on with The Nature Concervancy.  I wanted to have pages for each town involved and then be able to click on project types on the side panel to turn projects on and off in the main stage.

 

I discovered on GeoNet that you cannot leave spaces between words on the side panel (it just automatically sets it to 1 space) so I followed the advice of another user and created an HTML table .

 

It worked fine but the table does not adjust when displayed on different screens.  It looked fine on my larger work computer but when on my laptop it displays as follows:

 

 

It is even worse on an Ipad.

I am new to HTML and pretty much just copied and pasted code in and adjusted to make it work but I am wondering if there is some code I am missing that will get the table to adjust size depending on the screen.  Below is how I formatted my table in HTML. Any advice would be greatly appreciated, thanks!

 

<style type="text/css">table, th, td {

    border: 1px solid black;

    padding: 30px;

}

</style>

<table>

<tbody>

  <tr>

   <td style="text-align: center;"><strong><span style="font-size:18px"><a data-storymaps="MJ-ACTION-1453219985018" data-storymaps-type="media">Bank Protection</a></span></strong></td>

   <td style="text-align: center;"><span style="font-size:18px"><strong><a data-storymaps="MJ-ACTION-1453220000213" data-storymaps-type="media">Beach</a></strong></span></td>

   <td style="text-align: center;"><span style="font-size:18px"><strong><a data-storymaps="MJ-ACTION-1453220020242" data-storymaps-type="media">Building</a></strong></span></td>

   <td style="text-align: center;"><strong><span style="font-size:18px"><a data-storymaps="MJ-ACTION-1453220035002" data-storymaps-type="media">Bulkhead</a></span></strong></td>

  </tr>

  <tr>

   <td style="text-align: center;"><span style="font-size:18px"><strong><a data-storymaps="MJ-ACTION-1453220055343" data-storymaps-type="media">Culvert</a></strong></span></td>

   <td style="text-align: center;"><span style="font-size:18px"><strong><a data-storymaps="MJ-ACTION-1453220072792" data-storymaps-type="media">Dune</a></strong></span></td>

   <td style="text-align: center;"><span style="font-size:18px"><strong><a data-storymaps="MJ-ACTION-1453220088321" data-storymaps-type="media">Flood Protection System</a></strong></span></td>

   <td style="text-align: center;"><span style="font-size:18px"><strong><a data-storymaps="MJ-ACTION-1453220101187" data-storymaps-type="media">Groin</a></strong></span></td>

  </tr>

  <tr>

   <td style="text-align: center;"><span style="font-size:18px"><strong><a data-storymaps="MJ-ACTION-1453220116983" data-storymaps-type="media">Infiltration Galleries</a></strong></span></td>

   <td style="text-align: center;"><span style="font-size:18px"><strong><a data-storymaps="MJ-ACTION-1453220129548" data-storymaps-type="media">Rain Garden Bioswale</a></strong></span></td>

   <td style="text-align: center;"><span style="font-size:18px"><strong><a data-storymaps="MJ-ACTION-1453220143714" data-storymaps-type="media">Road</a></strong></span></td>

   <td style="text-align: center;"><span style="font-size:18px"><strong><a data-storymaps="MJ-ACTION-1453220155461" data-storymaps-type="media">Sediment Removal</a></strong></span></td>

  </tr>

  <tr>

   <td style="text-align: center;"><span style="font-size:18px"><strong><a data-storymaps="MJ-ACTION-1453220170065" data-storymaps-type="media">Sewer Infrastructure</a></strong></span></td>

   <td style="text-align: center;"><span style="font-size:18px"><strong><a data-storymaps="MJ-ACTION-1453220184134" data-storymaps-type="media">Storm Water Infrastructure</a></strong></span></td>

   <td style="text-align: center;"><strong><span style="font-size:18px"><a data-storymaps="MJ-ACTION-1453220198041" data-storymaps-type="media">Tide Gate</a></span></strong></td>

   <td style="text-align: center;"> </td>

  </tr>

</tbody>

</table>

Outcomes