I'm currently in the process of developing a website that interfaces with the Twitch API to display which users, from a predetermined group of 7, are online and offline. The functionality is mostly there, but I'm facing an issue where the top div is not aligning properly with the list of users.
If you want to check out the code, here's the link to the codepen: https://codepen.io/lieberscott/pen/YVZQMG
https://i.sstatic.net/19mjV.png
Here's a snippet of my code:
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">
</div>
<div class="col-xs-6 head">
<span class="title">
Twitch Streamers
</span>
<table>
<tr>
<td id="all">ALL</td>
</tr>
<tr>
<td id="online">ONL</td>
</tr>
<tr>
<td id="offline">OFF</td>
</tr>
</table>
</div>
</div>
</div>
<div id="result">
</div>
</div>
CSS
$blue: #5D6E81;
$gray: #68636B;
$khaki: #B7D0B9;
$title: #F1EBF2;
img {
border-color: white;
border-radius: 50%;
border-style: solid;
border-width: 3px;
height: 50px;
margin-right: 25px;
width: 50px;
}
line {
background-color: $title;
height: 5px;
}
table {
float: right;
font-size: 10px;
margin-right: 6px;
}
.act {
background-color: $khaki;
margin: 1px 0px 1px 0px;
padding: 8px 8px 8px 15px;
}
.desc {
color: $gray;
padding-top: 20px;
}
.desc2 {
color: $title;
}
.head {
background-color: $gray;
color: $title;
font-size: 40px;
overflow: hidden;
padding: 15px 0px 10px 25px;
}
.inact {
background-color: $blue;
margin: 1px 0px 1px 0px;
padding: 8px 8px 8px 15px;
}
.inact a, inact a:hover {
color: $khaki;
}
.title {
font-family: 'Days One', sans-serif;
font-size: 40px;
}
Is there any way to adjust this code to ensure the width of the top div lines up correctly with the results? Or should I consider reworking it entirely?
(I did manage to align it previously by using a single row and applying each result to a "col-xs-6 col-xs-offset-3" class, but this caused another issue with vertical alignment of the image, username, and status for each result, which I'd like to avoid.)