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;
}
@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;
}

View File

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

View File

@@ -1,38 +1,40 @@
@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">
<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'>
</a>
<div class="post_content">
<h5>
<a href="{{url($item->url)}}" title="{{$item->title}}">{{$item->title}}</a>
</h5>
<ul class="post_details simple">
<li class="category">
<a title="Regio: {{$item->region->title}}" href="{{url('nieuws/regio/' . $item->region->slug)}}">{{$item->region->title}}</a>
</li>
@if($item->edited && ($item->edited != $item->published))
<li class="date edited">
{{Formatter::relativeDate($item->edited)}} bijgewerkt om {{$item->published->format('H:i')}}
</li>
@else
<li class="date">
{{Formatter::relativeDate($item->published)}} om {{$item->published->format('H:i')}}
</li>
@endif
</ul>
</div>
</li>
<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='{{$item->images && count($item->images) ? $item->images[0]->title : $item->title}}'>
</a>
<div class="post_content">
<h5>
<a href="{{url($item->url)}}" title="{{$item->title}}">{{$item->title}}</a>
</h5>
<ul class="post_details simple">
<li class="category">
<a title="Regio: {{$item->region->title}}" href="{{url('nieuws/regio/' . $item->region->slug)}}">{{$item->region->title}}</a>
</li>
@if($item->edited && ($item->edited != $item->published))
<li class="date edited">
{{Formatter::relativeDate($item->edited)}} bijgewerkt om {{$item->published->format('H:i')}}
</li>
@else
<li class="date">
{{Formatter::relativeDate($item->published)}} om {{$item->published->format('H:i')}}
</li>
@endif
</ul>
</div>
</li>
@if($loop->index % 3 == 2)
</ul>
</ul>
</div>
@endif
@endforeach