Responsive CSS counter without Javascript

CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage. Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they’re used.

Today I want to show you how to create responsive cards that adapt to screen size. We have one great feature here, if the cards don’t fit on the screen, we’ll show the number of hidden cards, cool, right?

Let’s go to the code!

 

This is out HTML

<section class="small-card">
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__count">
            <p class="small-card__count-text">
                +<span class="small-card__count-value"></span> more items
            </p>
        </div>
    </section>

Nothing special here. We have one section and we have several divs inside!

 

CSS

.small-card {
    position: relative;
    height: 100px;
    padding: 10px;
    overflow: hidden;
    background: #ddd;
    counter-reset: item-count;
}

.small-card__item {
    float: left;
    width: 100px;
    height: 100px;
    background: #444;
    border-radius: 3px;
    margin: 0 0 10px 10px;
}

.small-card__item:first-child {
    margin-left: 0;
}

.small-card__count {
    display: none;
    width: 80px;
    height: 100px;
    position: absolute;
    right: 10px;
    top: 10px;
    background: #fff;
    border-radius: 3px;
}

.small-card__count-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 1.25em;
}

.small-card__count-value::after {
    content: counter(item-count);
}

@media (max-width: 319px) {
    .small-card__item:nth-child(1)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 9px) {
    .small-card__item:nth-child(0)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(-1) {
        margin-right: 90px;
    }
}

@media (max-width: 429px) {
    .small-card__item:nth-child(2)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 119px) {
    .small-card__item:nth-child(1)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(0) {
        margin-right: 90px;
    }
}

@media (max-width: 539px) {
    .small-card__item:nth-child(3)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 229px) {
    .small-card__item:nth-child(2)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(1) {
        margin-right: 90px;
    }
}

@media (max-width: 649px) {
    .small-card__item:nth-child(4)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 339px) {
    .small-card__item:nth-child(3)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(2) {
        margin-right: 90px;
    }
}

@media (max-width: 759px) {
    .small-card__item:nth-child(5)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 449px) {
    .small-card__item:nth-child(4)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(3) {
        margin-right: 90px;
    }
}

@media (max-width: 869px) {
    .small-card__item:nth-child(6)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 559px) {
    .small-card__item:nth-child(5)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(4) {
        margin-right: 90px;
    }
}

@media (max-width: 979px) {
    .small-card__item:nth-child(7)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 669px) {
    .small-card__item:nth-child(6)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(5) {
        margin-right: 90px;
    }
}

@media (max-width: 1089px) {
    .small-card__item:nth-child(8)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 779px) {
    .small-card__item:nth-child(7)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(6) {
        margin-right: 90px;
    }
}

@media (max-width: 1199px) {
    .small-card__item:nth-child(9)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 889px) {
    .small-card__item:nth-child(8)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(7) {
        margin-right: 90px;
    }
}

Here is the demo.

Thank you all.

You can also read this

Short-circuits conditionals

If you have to execute a function only if condition...

// You can use short-circuit
condition && doSomething();

Remove duplicate elements from list by value with jQuery

jQuery is very useful and easy to learn and it’s...

.list {
  list-style:none;
}