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

The :valid CSS pseudo-class

The :valid CSS pseudo-class represents any  <input> or other <form> element whose...

input:valid {
  background-color: powderblue;
}

Routing in Node.js with Express.Js

In this post I will try to explain how routing...

app.get('/', function (req, res) {
  res.send('hello from me')
})