3 X 1 Grid

Styling for a 3 X 1 Homepage grid

David Hall
Written by David HallLast update 1 year ago

Here's the code for a 3 X 1 grid usable on an HTML Content tab compatible with iOS and Android

You will find 3 dots underneath the icons these need to remain in the layout to allow the fixed position to work, you can change the colour on the dots to be the same as the background colour by using the text editor in the content tab

<div class="ai_custom_html">
<div class="ai_custom_html"><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My App Home Screen</title>
</div>
</div>
<style><!--
body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    #button-table {
      margin: 0 auto;
      max-width: 900px;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      border-collapse: collapse;
      border: none;
    }
    #button-table td {
      width: 33.33%;
      height: auto;
      padding: 0;
      border: none;
    }
    #button-table img {
      display: block;
      max-width: 100%;
      height: auto;
    }
    #button-table span {
      display: block;
      font-size: 12px;
      margin-top: 5px;
    }
--></style>
<div class="ai_custom_html">
<table id="button-table">
<tbody>
<tr>
<td><a onclick="javascript:changetotab(8584589);" style="text-decoration: none;"></a><span><a onclick="javascript:changetotab(8584589);" style="text-decoration: none;"></a><br /></span></td>
<td><span><a onclick="javascript:changetotab(8584589);" style="text-decoration: none;"></a><br /></span></td>
<td><span><a onclick="javascript:changetotab(8584589);" style="text-decoration: none;"></a><br /></span></td>
</tr>
<tr>
<td><span><a onclick="javascript:changetotab(8584589);" style="text-decoration: none;"></a><br /></span></td>
<td><span><a onclick="javascript:changetotab(8584589);" style="text-decoration: none;"></a></span></td>
<td><span></span></td>
</tr>
<tr>
<td><span><a onclick="javascript:changetotab(8584589);" style="text-decoration: none;"><img width="300" height="300" src="https://storage.googleapis.com/gs.appbuild.io/apps/bizappsc/images/org/716812084755867.png" /></a>.</span></td>
<td><span><a onclick="javascript:changetotab(8584589);" style="text-decoration: none;"><img width="100%" src="https://storage.googleapis.com/gs.appbuild.io/apps/bizappsc/images/org/816812084756145.png" /></a>.</span></td>
<td><span><a onclick="javascript:changetotab(8584589);" style="text-decoration: none;"><img width="100%" src="https://storage.googleapis.com/gs.appbuild.io/apps/bizappsc/images/org/916812084756351.png" /></a>.</span></td>
</tr>
</tbody>
</table>
</div>

Did this answer your question?