diff --git a/punch_list/css/custom.css b/punch_list/css/custom.css
index e376ea5..785b700 100644
--- a/punch_list/css/custom.css
+++ b/punch_list/css/custom.css
@@ -7,6 +7,19 @@ textarea {
 	height:50%;
 	color: lime;
 	border: 1px solid #999; }
+  .one.column,
+  .one.columns                    { width: 4.66666666667%; }
+  .two.columns                    { width: 13.3333333333%; }
+  .three.columns                  { width: 22%;            }
+  .four.columns                   { width: 30.6666666667%; }
+  .five.columns                   { width: 39.3333333333%; }
+  .six.columns                    { width: 48%;            }
+  .seven.columns                  { width: 56.6666666667%; }
+  .eight.columns                  { width: 65.3333333333%; }
+  .nine.columns                   { width: 74.0%;          }
+  .ten.columns                    { width: 82.6666666667%; }
+  .eleven.columns                 { width: 91.3333333333%; }
+  .twelve.columns                 { width: 100%; margin-left: 0; }
 #newEvent {
 	display: none;}
 #editEvent {
@@ -104,9 +117,6 @@ textarea {
  /* display: block; */
   /*width: 99%; */
   text-align: left;  }
-table.punches {
-  width: 99%;
-}
 .notes {
   background: #000;
   margin-top: 10px;
diff --git a/punch_list/eventManage.js b/punch_list/eventManage.js
index 6860e34..0193832 100644
--- a/punch_list/eventManage.js
+++ b/punch_list/eventManage.js
@@ -58,12 +58,12 @@ function genList(punchList) {
 		if (punchList[i].progress.toLowerCase() === "in progress") {
 			console.log(`in progress`);
 //			list += "<tr>";
-			list += "<div class='punchlist top-bottom-border'>"; //
+			list += "<div class='punchlist container top-bottom-border'>"; //
 				list += "<div class='ten columns'>";
-					list += "<div class='container " + itemStyle + "' onClick=enablePunchDetail(" + i + ")>" + punchList[i].subject + "</div>"; //
-					list += "<div class='two columns " + itemStyle + "'>Status: " + punchList[i].progress + "</div>";
+					list += "<div class='12 columns " + itemStyle + "' onClick=enablePunchDetail(" + i + ")><span class=subject>" + punchList[i].subject + "</span></div>"; //
+					list += "<div class='three columns " + itemStyle + "'>Status: " + punchList[i].progress + "</div>";
 					list += "<div class='two columns " + itemStyle + "'>Priority: " + punchList[i].priority + "</div>";
-					list += "<div class='three columns " + itemStyle + "'>Need By: " + punchList[i].nDate + "</div>";
+					list += "<div class='four columns " + itemStyle + "'>Need By: " + punchList[i].nDate + "</div>";
 				list += "</div>";
 				list += "<div class='two columns'>";
 					list += "<div class=dropdown>";
@@ -87,7 +87,7 @@ function genList(punchList) {
 				console.log(`not in progress or not done`);
 			list += "<div class='punchlist top-bottom-border'>"; //
 				list += "<div class='ten columns'>";
-					list += "<div class='container " + itemStyle + "' onClick=enablePunchDetail(" + i + ")>" + punchList[i].subject + "</div>"; //
+					list += "<div class='container " + itemStyle + "' onClick=enablePunchDetail(" + i + ")><span class=subject>" + punchList[i].subject + "</span></div>"; //
 					list += "<div class='two columns " + itemStyle + "'>Status: " + punchList[i].progress + "</div>";
 					list += "<div class='two columns " + itemStyle + "'>Priority: " + punchList[i].priority + "</div>";
 					list += "<div class='three columns " + itemStyle + "'>Need By: " + punchList[i].nDate + "</div>";