I want my inline divs to have flexible width. How can I achieve it?

[nad.chel]

Check out these dummy employee cards. I like them. They make my page feel less empty. What I don’t like is their hard-coded dimensions

I’d like them to have the same proportions as the central employee card but have dimensions that are, say, 1.1 times smaller

I tried changing their width to auto, but it made them disappear altogether

How do you think I should achieve this flexibility?

Here’s a code example (the actual code is more complicated)

<div id="user-tab" class="tab-pane container p-0 mx-auto active">
                <h4 class="display-4 text-center mb-4">Your employee card</h4>
                <div class="d-flex justify-content-around">

                    <div class="dummy-card shadow my-auto">
                        <div></div>
                    </div>

                    <div class="card shadow-lg">
                        <div class="card-header text-center text-secondary">
                            <h4 class="d-inline font-weight-bold">User User</h4>
                            <span> (user)</span>
                        </div>
                        <div class="card-body">
                            <ol>
                                <li><strong>Username: </strong><span>user</span>
                                </li>
                                <li><strong>Name: </strong><span>User</span></li>
                                <li><strong>Lastname: </strong><span>User</span>
                                </li>
                                <li><strong>Department: </strong><span>sales</span>
                                </li>
                                <li><strong>Salary: </strong><span>100000</span></li>
                                <li><strong>Age: </strong><span>19</span></li>
                                <li><strong>Email: </strong><span>[email protected]</span></li>
                                <li><strong>Role(s): </strong>
                                    <span>U</span>
                                </li>
                            </ol>

                            <a class="btn btn-outline-primary" href="#">
                                Edit info
                            </a>

                           <a class="btn btn-outline-secondary" href="#">
                                Change password
                            </a>
                     </div>
                </div>

                    <div class="dummy-card shadow my-auto">
                        <div></div>
                    </div>
                </div>
            </div>

.dummy-card {
    width: 290px;
    height: 310px
}

.dummy-card div:first-of-type {
    background-color: rgba(0,0,0,.03);
    height: 15%
}

[kirativewd]

Hi there,

I can see that you asked this two days ago. Have you resolved this yourself? If not, I have a couple of questions.

1. Could you share more of your CSS, please?
2. Are you using a framework (such as Bootstrap) for this project?
3. Do you have any examples of what the end design would look like?

Thank you.

[nad.chel]

Hi. I realized that if I hide them altogether on smaller screens, it doesn’t matter that much if they have hard-coded dimensions or not. But you’re still free to suggest a solution to that if you want

@media (max-width: 991.98px) {
    .dummy-card {
        display: none;
    }
}