Kevin Powell - Community•3mo ago

Responsive Carousel (TailWind + JS)

Hello, I'm trying to build a responsive carousel. Ideally, what I'd like to happen is that the amount of visible products decreases based on screen size. (ie: web: 5, tablet: 3, phone: 2). I tried using Grid instead of flex, but I couldn't stop content from wrapping. Any ideas would be greatly appreciated. Here's my demo: https://codepen.io/Matt-CopOffMatt/pen/eYopOWj Thank you!

1 Reply

Matt•3mo ago

Bump, does anyone have any other ideas how to make this responsive?

@media only screen and (min-width: 1024px) and (max-width: 1268px) {
    .product-card {
        min-width: calc(25% - 2rem);
    }
}

@media only screen and (min-width: 840px) and (max-width: 1024px) {
    .product-card {
        min-width: calc(33% - 2rem);
    }
}

@media only screen and (min-width: 600px) and (max-width: 840px) {
    .product-card {
        min-width: calc(50% - 2rem);
    }
}

@media only screen and (min-width: 200px) and (max-width: 600px) {
    .product-card {
        min-width: calc(100% - 2rem);
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1268px) {
    .product-card {
        min-width: calc(25% - 2rem);
    }
}

@media only screen and (min-width: 840px) and (max-width: 1024px) {
    .product-card {
        min-width: calc(33% - 2rem);
    }
}

@media only screen and (min-width: 600px) and (max-width: 840px) {
    .product-card {
        min-width: calc(50% - 2rem);
    }
}

@media only screen and (min-width: 200px) and (max-width: 600px) {
    .product-card {
        min-width: calc(100% - 2rem);
    }
}

This is basically what I'm trying todo without a bunch of media queries. (will adjust JS accordingly)

Gaming

Programming

Responsive Carousel (TailWind + JS)