fix style

app/assets/stylesheets/web_resources_front.css.scss

@@ -1,11 +1,14 @@
 // Place all the styles related to the act controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
-.index-link.index2 li.col-md-4{
-    float: left;
+.index-link{
     .link-img-wrap {
+        display: inline-table;
+        width: 30%;
+        @media (max-width: 576px){
+            width: 50%;
+        }
         overflow: hidden;
-        height: 12.5em;
         img {
             max-height: 100%;
             max-width: 100%;
@@ -13,6 +16,13 @@
             width: auto;
         }
     }
+}
+.index-link.index2 li.col-md-4{
+    float: left;
+    .link-img-wrap {
+        height: 12.5em;
+        width: auto;
+    }
     a:hover .link-title{
         color: #0032b2;
         font-size: 1.15em;
@@ -25,7 +35,8 @@
     }
     @media (max-width: 576px){
         width: 100%;
-        .alink-img-wrap {
+        a .link-img-wrap {
+            width: auto;
             height: auto;
         }
     }

modules/web_resource/web_res_index1.html.erb

@@ -5,10 +5,10 @@
   <ul class="list-unstyled" data-list="web_link" data-level="0">
     <li class="index-content">
       <a class="index-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">
-        <div class="link-img-wrap{{display_image}}">
-          <img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
-        </div>
         <h4>
+          <div class="link-img-wrap{{display_image}}">
+            <img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+          </div>
           {{title}}
           <span data-list="statuses" data-level="1">
             <span class="label status {{status-class}}">{{status}}</span>