title: Grid display on multiple browsers
body: <p>I'm currently in the final stages of readying my art and design website ( www.jamieansell.com ) and I am using the One% CSS Grid to hold the preview images on the Graphic Design and artwork pages. </p>
  
  <p>This setup works very well on Google Chrome, but I recently discovered that the grids are stretched and distorted when viewing the site on Safari and Android. </p>
  
  <p>I've had a fiddle with the CSS but to no avail. Below is the relevant CSS:</p>
  
  <pre><code>    Common columns definitions
      */
      .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
      float: left;
      margin: 0%; 0 0 0;
      }
  
      .col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last,        .col8.last, .col9.last, .col10.last, .col11.last, .col12 {
      margin: 0;
  }
  
  .col1 { width: 5.5%; margin: -3.1%; }
  .col2 { width: 16.8%; margin: -0.1%; }
  
  .col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img {
      width: 100%;
      height: 100%;
      display: block;
  }
  </code></pre>
  
  <p>I can also post the page markup on request if needed.</p>
  
  <p>Thanks very much for your help!</p>
  
  <p>Jamie</p>
  
  <pre><code>&lt;style&gt;
          body {
              margin-top: 1px;
          }
  
          .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
              background: #ffffff;
              color: #000;
              margin-bottom: 0px;
              text-align: center;
              padding: 0px 0;
          }
  
          @media all and (max-width: 768px) {
              .onerow {
                  margin: 0px 0 100px;
              }
          }
      .col13 {            background: #801255;
              color: #fff;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col101 {           background: #801255;
              color: #fff;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col111 {           background: #801255;
              color: #fff;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col121 {           background: #801255;
              color: #fff;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col21 {            background: #801255;
              color: #fff;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col31 {            background: #801255;
              color: #fff;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col41 {            background: #801255;
              color: #fff;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col51 {            background: #801255;
              color: #fff;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col61 {            background: #801255;
              color: #fff;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col71 {            background: #801255;
              color: #fff;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col81 {            background: #801255;
              color: #fff;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col91 {            background: #801255;
              color: #fff;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
      .col14 {            background: #ffffff;
              color: #000;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col102 {           background: #ffffff;
              color: #000;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col112 {           background: #ffffff;
              color: #000;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col122 {           background: #ffffff;
              color: #000;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col22 {            background: #ffffff;
              color: #000;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col32 {            background: #ffffff;
              color: #000;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col42 {            background: #ffffff;
              color: #000;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col52 {            background: #ffffff;
              color: #000;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col62 {            background: #ffffff;
              color: #000;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col72 {            background: #ffffff;
              color: #000;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col82 {            background: #ffffff;
              color: #000;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  .col92 {            background: #ffffff;
              color: #000;
              margin-bottom: 1px;
              text-align: center;
              padding: 1px 0;
  }
  
      &lt;/style&gt;
  
  
      &lt;/head&gt;
  
  &lt;body&gt;
  &lt;br&gt;&lt;/br&gt;
      &lt;div class="onepcssgrid-1200"&gt;
      &lt;div class="col2"&gt;&lt;a class='gallery' href="images/Lucid.jpg" title=""&gt;&lt;img src="images/sitsol-prev.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div class="col2"&gt;&lt;img src="images/domin-prev.jpg"&gt;&lt;/div&gt;
    &lt;div class="col2"&gt;&lt;a class='gallery' href="images/Lucid.jpg" title=""&gt;&lt;img src="images/glass-prev.jpg"&gt;&lt;/a&gt;&lt;/div&gt; 
    &lt;div class="col2"&gt;&lt;a class='gallery' href="images/Pilot-Light-(Detail).jpg" title="Read, Test &amp; Reflect (2006)"&gt;&lt;img src="images/rtr-prev.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="col2"&gt;&lt;a class='gallery' href="" title=""&gt;&lt;img src="images/gd-inst.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="col2"&gt;&lt;a class='gallery' href="images/Carbon.jpg" title="College of Biomedical Science (2008)"&gt;&lt;img src="images/cobs-prev.jpg"&gt;&lt;/a&gt;&lt;/div&gt;  
    &lt;div class="col2"&gt;&lt;a class='gallery' href="" title="Truth"&gt;&lt;img src="images/truth-prev.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="col2"&gt;&lt;a class='gallery' href="" title="Marta Cots School of English (2013)"&gt;&lt;img src="images/mc-prev.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="col2"&gt;&lt;a class='gallery' href="images/Reel1.jpg" title="Reel1"&gt;&lt;img src="images/reel-prev.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="col2"&gt;&lt;a class='gallery' href="images/Reel1.jpg" title="Join the AAPT"&gt;&lt;img src="images/join-prev.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;
         &lt;/body&gt;
  
          &lt;/body&gt;
  </code></pre>