Memberlist card responsive css

{$multipage}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" colspan="{$colspan}">
	<div class="float_right">
		<a href="memberlist.php?username_match=begins&amp;username={$lang->a}" style="padding: 5px;">{$lang->a}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->b}" style="padding: 5px;">{$lang->b}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->c}" style="padding: 5px;">{$lang->c}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->d}" style="padding: 5px;">{$lang->d}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->e}" style="padding: 5px;">{$lang->e}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->f}" style="padding: 5px;">{$lang->f}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->g}" style="padding: 5px;">{$lang->g}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->h}" style="padding: 5px;">{$lang->h}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->i}" style="padding: 5px;">{$lang->i}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->j}" style="padding: 5px;">{$lang->j}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->k}" style="padding: 5px;">{$lang->k}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->l}" style="padding: 5px;">{$lang->l}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->m}" style="padding: 5px;">{$lang->m}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->n}" style="padding: 5px;">{$lang->n}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->o}" style="padding: 5px;">{$lang->o}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->p}" style="padding: 5px;">{$lang->p}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->q}" style="padding: 5px;">{$lang->q}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->r}" style="padding: 5px;">{$lang->r}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->s}" style="padding: 5px;">{$lang->s}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->t}" style="padding: 5px;">{$lang->t}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->u}" style="padding: 5px;">{$lang->u}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->v}" style="padding: 5px;">{$lang->v}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->w}" style="padding: 5px;">{$lang->w}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->x}" style="padding: 5px;">{$lang->x}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->y}" style="padding: 5px;">{$lang->y}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->z}" style="padding: 5px;">{$lang->z}</a>
	</div>
	<div><strong class="">{$lang->member_list}</strong></div></td>
</tr>
<tr>
</tr>
</table>
{$users}

<div class="user-card-container">
<div class="user-card">
<center>{$user['avatar']}</center>
<div class="info">{$user['profilelink']}<br>{$user['usertitle']}<br>{$user['userstars']}</div>
<div class="info-line"></div>
<div class="info-title"> <i class="fas fa-calendar"></i><strong> {$lang->joined}:</strong> {$user['regdate']}<br /></div>
<div class="info-title"> <i class="fas fa-globe"></i><strong> {$lang->lastvisit}:</strong> {$user['lastvisit']}<br /></div>
<div class="info-title"> <i class="fas fa-comment"></i><strong> {$lang->posts}:</strong> {$user['postnum']}<br /></div>
<div class="info-title"> <i class="fas fa-bell"></i><strong> {$lang->threads}:</strong> {$user['threadnum']}<br /></div>
<div class="info-title"> <i class="fas fa-user"></i><strong> {$referral_header}:</strong> {$referral_bit}<br /></div>	
</div>
</div>	

.info-title {
    font-size: 13px;
    color: #a8a9a9;
    background: #f1fafa;
    padding: 8px 8px;
    border-bottom: 1px solid #f2f3f5;
}

.user-card-container {
    display: inline-block;
    justify-content: left;
    padding: 10px 0px 10px 0px;
}

.user-card {
    height: 300px;
    width: 250px;
    background: #a2c6f2;
    margin: 0px 0px;
    border-radius: 10px;
}

.user-card .info-line {
    border-radius: 50px;
    margin: -95px 30px 0px 30px;
}
.user-card .info {
    height: 150px;
    width: 250px;
    text-align: center;
    margin: 9px 0px 13px 0px;
    background: #d1dbe6;
}
@media only screen and (max-width: 768px) {
.user-card-container, .user-card, .user-card .info {	width: 100% !important;}}

<div class="user-card-container">
<div class="user-card">
<center>{$user['avatar']}</center>
<div class="info">{$user['profilelink']}<br>{$user['usertitle']}<br>{$user['userstars']}</div>
<div class="info-line"></div>
<div class="info-title"> <i class="fas fa-calendar"></i><strong> {$lang->joined}:</strong> {$user['regdate']}<br /></div>
<div class="info-title"> <i class="fas fa-globe"></i><strong> {$lang->lastvisit}:</strong> {$user['lastvisit']}<br /></div>
<div class="info-title"> <i class="fas fa-comment"></i><strong> {$lang->posts}:</strong> {$user['postnum']}<br /></div>
<div class="info-title"> <i class="fas fa-bell"></i><strong> {$lang->threads}:</strong> {$user['threadnum']}<br /></div>
</div>
</div>