Fix buggy responsive layout

website/public/css/nhgooi.css

@@ -8,6 +8,13 @@ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
 	color: #1F3977;
 }
 
+
+@media screen and (max-width:479px) {
+	.row .column {
+		width: 100%;
+	}
+}
+
 .tabs_navigation li a:hover,
 .tabs_navigation li a.selected,
 .tabs_navigation li.ui-tabs-active a {
@@ -44,6 +51,12 @@ button[disabled]:hover
 	height: 100%;
 }
 
+.post h2,
+.post h5 {
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
 .post.single .post_details a {
 	color: #1F3977;
 }
@@ -54,6 +67,10 @@ button[disabled]:hover
 	background-color: #03A6E0;
 }
 
+.post_details.simple li.category a {
+	color: #1F3977;
+}
+
 .post_details date.edited {
 	font-weight: bold;
 }

website/resources/views/partial/newslist_small.blade.php

@@ -1,16 +1,17 @@
 @php($imgBase = 'https://nhgooi.nl')
 @foreach($news as $item)
 @if($loop->index % 3 == 0)
-<ul class="blog medium clearfix">
+<div class="row grid">
+	<ul>
 @endif
-<li class="post">
+		<li class="post column column_1_3">
 			<a href="{{url($item->url)}}" title="{{$item->title}}">
 				@if($item->video)
 				<span class="icon video"></span>
 				@elseif($item->images && count($item->images) > 1)
 				<span class="icon gallery"></span>
 				@endif
-		<img src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}' alt='img'>
+				<img src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}' alt='{{$item->images && count($item->images) ? $item->images[0]->title : $item->title}}'>
 			</a>
 			<div class="post_content">
 				<h5>
@@ -31,8 +32,9 @@
 					@endif
 				</ul>
 			</div>
-</li>
+		</li>
 @if($loop->index % 3 == 2)
-</ul>
+	</ul>
+</div>
 @endif
 @endforeach