Improved responsive m2m selector, ckeditor and sorl-thumbnail widgets

admin_interface/templates/admin_interface/css/sorl-thumbnail.css

@@ -2,8 +2,25 @@
 sorl-thumbnail - improved AdminImageMixin widget layout
 https://github.com/mariocesar/sorl-thumbnail
 */
-.admin-interface a.thumbnail + input[type="checkbox"] {
-    margin: 10px 0;
+
+.admin-interface a.thumbnail + a {
+    font-weight: normal;
+}
+
+.admin-interface a.thumbnail + a + input[type="checkbox"] {
+    margin: 10px 0px 10px 18px;
+}
+
+@media (max-width: 767px){
+    .admin-interface a.thumbnail + a {
+        display: block;
+        margin-top: 3px;
+        white-space: pre-wrap;
+        word-break: break-word;
+    }
+    .admin-interface a.thumbnail + a + input[type="checkbox"]  {
+        margin: 15px 0;
+    }
 }
 
 .admin-interface a.thumbnail ~ label {
@@ -21,6 +38,13 @@ https://github.com/mariocesar/sorl-thumbnail
     margin-bottom: 5px;
 }
 
+@media (max-width: 767px){
+    .admin-interface.change-form div[style="float:left"] {
+        font-size: 12px;
+        width: 100%;
+    }
+}
+
 .admin-interface .aligned .form-row a.thumbnail ~ input[type="file"] {
     margin-top: 0px;
 }
@@ -29,9 +53,15 @@ https://github.com/mariocesar/sorl-thumbnail
     .admin-interface .aligned .form-row a.thumbnail ~ input[type="file"] {
         width: auto;
         padding: 0px;
+        display: block;
+        margin-top: 3px;
     }
 
     .admin-interface div[style="float:left"] {
         margin-bottom: 0px;
     }
-}
+
+    .admin-interface div[style="float:left"] + div.help {
+        margin-top: 0px !important;
+    }
+}