<style> .hourlyForecastTile { background-color: #2F2F2F; flex-direction: row; border-radius: 1vh; } .hourlyForecastTile .icon { font-size: 10vmin; } .hourlyForecastTile .content { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 95%; height: 85%; } .hourlyForecastTile .entry { display: flex; flex-direction: column; align-items: center; justify-content: space-between; flex: 1; height: 100%; } .hourlyForecastTile .icon { padding-top: 1vmin; padding-bottom: 0.5vmin; font-size: 3.5vmin; } .hourlyForecastTile .hour { font-size: 1.5vmin; } .hourlyForecastTile .temperature { font-size: 2vmin; font-weight: bold; } .hourlyForecastTile .rain { display: flex; flex-direction: row; align-items: center; justify-content: space-between; font-size: 1.5vmin; } .hourlyForecastTile .rain i { font-size: 2.5vmin; } .hourlyForecastTile .rainProbability { padding-left: 1vmin; } .hourlyForecastTile .windSpeed{ font-size: 1.3vmin; } </style> <div class="hourlyForecastTile"> <div class="content"> {% for item in data %} <div class="entry"> <div class="hour">{{ item['hour'] }} Uhr</div> <i class="wi {{ item['icon'] }} icon" style="color: {{ item['iconColor'] }};" title="{{ item['description'] }}"></i> <div class="temperature" style="color: {{ item['temperatureColor'] }}">{{ item['temperature'] }}°C</div> <div class="rain"> <i class="wi wi-raindrops"></i> <div class="rainProbability">{{ item['rainProbability'] }}</div> </div> <div class="windSpeed" style="color: {{ item['windSpeedColor'] }}">{{ item['windSpeed'] }}</div> </div> {% endfor %} </div> </div>