Html Question posted in
Some basic documentation can be found here.

Html – How to remove the blank gap on the last element of the card

I want the cards to be evenly spread out across the page from left to right. However at the current stage there’s a massive gap to the right. I’ve tried to use the ‘last-child’ class in CSS, but it wasn’t successful

{% block content %}
<style>

    .card-container {
        display: flex;
    }

    .card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        transition: 0.3s;
        height: 25%;
        width: 25vw;
        margin-right: 20px;
        border: 1px solid #ccc;
        height: 250px;
    }

    .card:last-child {
        margin-right: 0;
    }

    .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }

    .container {
        padding: 2px 16px;
    }
</style>

<div class="card-container">
    <div class="card">
        <img src="download.png" alt="Statistic" style="width:25%, height:125% ">
        <div class="container">
            <h4><b>Jon Doe</b></h4>
            <p>Architect & Engineer</p>
        </div>
    </div>

    <div class="card">
        <img src="download.png" alt="Statistic" style="width:25%, height:125% ">
        <div class="container">
            <h4><b>Jon Doe</b></h4>
            <p>Architect & Engineer</p>
        </div>
    </div> 
</div>
{% endblock %}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Apply this CSS to the main container:

    .container {
   width: 100vw;
}

  2. 0 
     .card-body {
     flex: 1 1 auto;
     padding: 1rem 1rem;
     display: flex;    
     flex-direction: column;
     justify-content: space-between;

    Try this!.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search