Currently working on a new project, I am looking to display a calendar in the form of an inline list. It's not too difficult, but here's where it gets tricky - when the window resizes, I want fewer dates to be shown while still keeping the current date centered.
In my code below, I managed to make the right-hand side disappear using .content's overflow: hidden and ul's white-space: nowrap properties (see image). However, this is not the desired outcome. The yellow box representing the current date should be centered... *cue facepalm*
Javascript is great, but if you have a CSS solution, that would be even better. :)
Check out the pen here as well: http://codepen.io/PatJarl/pen/eLJyr
.m-racecards {
.content {
padding: 5%;
max-width: 80%;
margin: 0 auto;
overflow: hidden;
text-align: center;
ul {
white-space: nowrap;
li {
font-size: 25px;
display: inline-table;
padding: 10px;
}
}
.current {
background: $proto-yellow;
}
}
}
The HTML structure is pretty straightforward...
<div class="m-racecards">
<div class="content">
<ul>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li class="current">18</li>
<li>19</li>
<li>and so on.... </li>
</ul>
</div>