Use more mobile friendly design for random images (no tables, just blocks that

can be line-breaked

boards/static/css/base.css

@@ -1,115 +1,115 b''
 .ui-button {
    display: none;
 }
 
 .ui-dialog-content {
     padding: 0;
     min-height: 0;
 }
 
 .mark_btn {
     cursor: pointer;
 }
 
 .img-full {
     position: fixed;
     background-color: #CCC;
     border: 1px solid #000;
     cursor: pointer;
 }
 
 .strikethrough {
     text-decoration: line-through;
 }
 
 .post_preview {
     z-index: 300;
     position:absolute;
 }
 
 .gallery_image {
     display: inline-block;
 }
 
 @media print {
     .post-form-w {
         display: none;
     }
 }
 
 input[name="image"] {
      display: block;
      width: 100px;
      height: 100px;
      cursor: pointer;
      position: absolute;
      opacity: 0;
      z-index: 1;
 }
 
 .file_wrap {
      width: 100px;
      height: 100px;
      border: solid 1px white;
      display: inline-block;
 }
 
 form > .file_wrap {
     float: left;
 }
 
 .file-thumb {
     width: 100px;
     height: 100px;
     background-size: cover;
     background-position: center;
 }
 
 .compact-form-text {
     margin-left:110px;
 }
 
 textarea, input {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }
 
 .compact-form-text > textarea {
     height: 100px;
     width: 100%;
 }
 
 .post-button-form {
     display: inline;
 }
 
 .post-button-form > button, #autoupdate {
     border: none;
     margin: inherit;
     padding: inherit;
     background: none;
     font-size: inherit;
 }
 
 #form-close-button {
     display: none;
 }
 
 .post-image-full {
     width: 100%;
 }
 
 #preview-text {
     display: none;
 }
 
 .random-images-table {
     text-align: center;
     width: 100%;
 }
 
-.random-images-table > table {
+.random-images-table > div {
     margin-left: auto;
     margin-right: auto;
 }

boards/templates/boards/random.html

@@ -1,36 +1,32 b''
 {% extends "boards/base.html" %}
 
 {% load i18n %}
 
 {% block head %}
     <title>{% trans 'Random images' %} - {{ site_name }}</title>
 {% endblock %}
 
 {% block content %}
 
     {% if posts %}
         <div class="random-images-table">
-        <table>
-            <tr>
+            <div>
             {% for post in posts %}
-                <td>
                 <div class="gallery_image">
                 {% with post.get_first_image as image %}
                     {% autoescape off %}
                         {{ image.get_view }}
                     {% endautoescape %}
                     <a href="{{ post.get_absolute_url }}">>>{{ post.id }}</a>
                 {% endwith %}
                 </div>
-                </td>
                 {% if forloop.counter|divisibleby:"3" %}
-                </tr>
-                <tr>
+                </div>
+                <div>
                 {% endif %}
             {% endfor %}
-            </tr>
-        </table>
+            </div>
         </div>
     {% endif %}
 
 {% endblock %}