updating mobile threads

web/templates/base.html

@@ -133,7 +133,6 @@
             text-align: left;
             padding: 8px;
 						word-wrap: break-word;
-						word-break: break-all;
           }
 
           .hide {
@@ -186,7 +185,25 @@
 						clear: both;
 					}
 
+					
+					.standard-table {
+						display: block;
+					}
+
+					.mobile-table {
+						display: none;
+					}
+
           @media only screen and (max-width: 1000px) {
+
+						.standard-table {
+							display: none;
+						}
+
+						.mobile-table {
+							display: table;
+						}
+
             .container {
               width: 95%;
             }

web/templates/thread.html

@@ -32,7 +32,9 @@
 		<div style="clear:both;"></div>
 
 		<h2>{{ thread_category }} > {{ thread_name }}</h2>
-    <table class="row-spacing">
+		<!-- STANDARD-TABLE -->
+
+	<table class="row-spacing standard-table" style="width:100%; table-layout: fixed;">
 		<colgroup>
 			<col span="1" style="width: 15%;">
 			<col span="1" style="width: 70%;">
@@ -54,6 +56,31 @@
 		</tr>
 		{% endfor %}
 	</table>
+		<!-- MOBILE-TABLE -->
+
+			<table class="row-spacing mobile-table" style="width: 100%; min-width:100%;">
+				{% for post in posts %}
+				<tr>
+					<td style='vertical-align: top; overflow-wrap: anywhere; width: 100%;'>
+						<small style="color: grey;">
+							<div class="clearfix">
+								<div style="float:left; margin-right: 10px;">
+									<img src="{{ post.created_by.avatar }}" alt="" class="avatar" style="margin-top: 2px; width: 40px; height:auto;">
+								</div>
+								<div>
+									<a href="{% url 'user' post.created_by.id %}"><b>{{ post.created_by }}</b></a> {% if post.created_by.flair %}({{ post.created_by.flair }}) {% endif %} <br>
+									{{ post.created_at|naturaltime }}
+								</div>
+
+							</div>
+						</small>
+
+						<hr style="margin-top: -7px;">
+						{{ post.content|safe }}
+					</td>
+				</tr>
+				{% endfor %}
+			</table>
     <br>
 
 		<div style="width: 100%;">