CSS - How to make responsive slider according to this design

Question

I want to make a responsive sidebar according to this design

https://www.figma.com/file/XL2vgu8gUGkZJeYgf80jS0/Untitled?node-id=0%3A1

my main goal is to attach "< 4/12 >" functionality and make it responsive

here is my code: https://jsfiddle.net/yg8rwbju/1/

enter code here

it would be great if it can be completed without any extra library

Answer 1

Makes 1 column

.slider {display: grid; grid-template-columns: 100%; gap: 0 14px;}

To hide and toggle, you can add extra class.

<div class="slider__element content">

Hide 3rd and further elements with nth-child pseudo.

@media only screen and (max-width: 768px) {
.content:nth-child(n + 3){
   display: none;
 }
}

I suggest you to mobile-first styling. First, style it for mobile and then style it for desktop. It is good to handle mobile styling issues.

@media only screen and (min-width: 768px){}