Development

resources/less/metager/pages/resultpage/result.less

@@ -108,21 +108,41 @@
     .result-body {
         margin-top: 1px;
         max-width:100%;
-        display: flex;
+        margin-bottom: 8px;
+        &.with-image {
+            display: grid;
+            grid-template-columns: minmax(max-content, 160px) auto;
+            grid-column-gap: 8px;
+            grid-row-gap: 8px;
+            @media(max-width: 380px){
+                grid-template-columns: 1fr;
+                grid-template-rows: auto auto;
+            }
+            .result-image {
+                align-self: center;
+                justify-self: center;
+            }
+            .result-description {
+                align-self: center;
+            }
+        }
         text-align: justify;
         .result-image {
-            width: 180px;
-            padding-right: 10px;
-            margin-right: 10px;
-            & img {
+            
+            max-width: 160px;
+            > a{
                 display: block;
-                max-width: 160px;
-                max-height: 120px;
-                width: auto;
-                height: auto;
+                > img {
+                    display: block;
+                    max-width: 160px;
+                    max-height: 120px;
+                    width: auto;
+                    height: auto;
+                }
             }
         }
         .result-description {
+            align-self: center;
             margin-bottom: 3px;
             color: @result-description-color;
             font-size: .95em;;
@@ -238,7 +258,6 @@
     &>.result-options {
         max-width: 100%;
         &>.options {
-            font-size: .85em;
             border-top: 1px solid #ccc;
             width: 100%;
             text-align: right;