Currently, I have implemented a for loop to showcase a list of cars in a card layout. However, upon integrating the jinja template, the cards now appear vertically instead of horizontally.
Below is the HTML code snippet:
{% for car in cars %}
<div class="row">
<div class="column">
<div class="card">
<ul>
<li>Car Name: {{ car.ev_name }}</li>
<li>Manufacturer: {{ car.ev_manufacturer }}</li>
<li>Year:{{ car.ev_year }}</li>
<li>Battery Size: {{ car['ev_battery_size'] }} (Kwh)</li>
<li>WLTP range: {{ car['ev_range'] }} (Km)</li>
<li>Cost: €{{ car['ev_cost'] }}</li>
<li>Power: {{ car['ev_power'] }} (Kw)</li>
</ul>
<br>
<form action="/car_details/{{ car.key.name }}" method="post" class="filter_form">
<input type="submit" name="show_details" class="button-1" value="Details"/>
</form>
</div>
</div>
</div>
{% endfor %}
Check out the CSS styling provided below:
* {
box-sizing: border-box;
}
/* Float four columns side by side */
.column {
float: left;
width: 100%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {
margin: 0 -5px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
background-color: #f1f1f1;
width: 800px;
height: auto;
margin:auto;
font-weight: 600;
}
li {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
width: 32%;
}
I am seeking assistance to alter the card display setting so that they are positioned adjacent to each other with an automatic adjustment of width. Any suggestions or solutions would be greatly appreciated!