Fix buggy responsive layout

This commit is contained in:
2020-01-17 09:40:31 +01:00
parent d3ffa07d2f
commit bf5f1cd9b5
3 changed files with 51 additions and 32 deletions

View File

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

View File

@@ -1512,4 +1512,4 @@
{ {
-webkit-text-size-adjust: none; -webkit-text-size-adjust: none;
} }
} }

View File

@@ -1,38 +1,40 @@
@php($imgBase = 'https://nhgooi.nl') @php($imgBase = 'https://nhgooi.nl')
@foreach($news as $item) @foreach($news as $item)
@if($loop->index % 3 == 0) @if($loop->index % 3 == 0)
<ul class="blog medium clearfix"> <div class="row grid">
<ul>
@endif @endif
<li class="post"> <li class="post column column_1_3">
<a href="{{url($item->url)}}" title="{{$item->title}}"> <a href="{{url($item->url)}}" title="{{$item->title}}">
@if($item->video) @if($item->video)
<span class="icon video"></span> <span class="icon video"></span>
@elseif($item->images && count($item->images) > 1) @elseif($item->images && count($item->images) > 1)
<span class="icon gallery"></span> <span class="icon gallery"></span>
@endif @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> </a>
<div class="post_content"> <div class="post_content">
<h5> <h5>
<a href="{{url($item->url)}}" title="{{$item->title}}">{{$item->title}}</a> <a href="{{url($item->url)}}" title="{{$item->title}}">{{$item->title}}</a>
</h5> </h5>
<ul class="post_details simple"> <ul class="post_details simple">
<li class="category"> <li class="category">
<a title="Regio: {{$item->region->title}}" href="{{url('nieuws/regio/' . $item->region->slug)}}">{{$item->region->title}}</a> <a title="Regio: {{$item->region->title}}" href="{{url('nieuws/regio/' . $item->region->slug)}}">{{$item->region->title}}</a>
</li> </li>
@if($item->edited && ($item->edited != $item->published)) @if($item->edited && ($item->edited != $item->published))
<li class="date edited"> <li class="date edited">
{{Formatter::relativeDate($item->edited)}} bijgewerkt om {{$item->published->format('H:i')}} {{Formatter::relativeDate($item->edited)}} bijgewerkt om {{$item->published->format('H:i')}}
</li> </li>
@else @else
<li class="date"> <li class="date">
{{Formatter::relativeDate($item->published)}} om {{$item->published->format('H:i')}} {{Formatter::relativeDate($item->published)}} om {{$item->published->format('H:i')}}
</li> </li>
@endif @endif
</ul> </ul>
</div> </div>
</li> </li>
@if($loop->index % 3 == 2) @if($loop->index % 3 == 2)
</ul> </ul>
</div>
@endif @endif
@endforeach @endforeach