I have created multiple lists using following code blocks.
<div class="col-lg-3"
style="background-color: #cecece;border-radius: 10px;border-right: 5px solid #cecece;border-left: 5px solid #cecece;">
<!--<div class="row" style="padding-left: 10px;padding-top: 5px;text-align: center">-->
<!--<h3>Monitoring & Analytics</h3>-->
<!--</div>-->
<div style="text-align: center;padding-top: 5px;">
<h3>Monitoring & Analytics</h3>
</div>
<div class="row" style="text-align: center">
{{ $list := (where .Site.Pages.Reverse "Section" "monitoring_analysis") }}
{{ range after 1 $list }}
<div class="col-lg-6"
style="background-color: white;border-style: solid;border-color: #cecece;border-width: 5px;min-height: 158px;border-radius: 35px;">
<a href="{{.Params.page_link}}">{{ .Title }}</a>
<a href="{{.Params.page_link}}" class="db grow">
{{ $featured_image := .Params.featured_image }}
{{ if .Params.featured_image }}
{{/* Trimming the slash and adding absURL make sure the image works no matter where our site
lives */}}
{{ $featured_image := (trim $featured_image "/") | absURL }}
{{ end }}
<img style="max-width: 80%;max-height: 100px!important;" src="{{ $featured_image }}" class="img"
alt="image">
</a>
<br>
</div>
{{ end }}
</div>
</div>
This is only one row and there are 4 other rows like this. The content loading source is different. Let’s imagine 3 rows having 4 items and last one having 6 items. Then all the 4 rows getting the height of last row automatically. How to fix this ?
You can see the issue here. All first 3 rows have empty space at the bottom. Please tell me how to fix this.