We currently have a bootstrap setup that displays 4 horizontal scroll cards by default. However, we are looking to only show 3 cards in view and allow the 4th card to be viewed by scrolling.
On mobile view, the code is still displaying 4 tiles even after trying to reduce it to 3 tiles by adjusting width and size. We specifically need only 3 tiles per page on mobile view.
Thank you in advance.
.scrolling-wrapper {
overflow-x: auto;
}
body {
background-color: black;
color: #fff;
font-family: 'system-ui';
}
h1 {
font-weight: 700;
font-size: 3.4em;
}
.subtitle {
font-size: 1.25em;
opacity: 0.65;
}
.card-block {
height: 300px;
background-color: #fff;
border: none;
background-position: center;
background-size: cover;
transition: all 0.2s ease-in-out !important;
border-radius: 24px;
&:hover {
transform: translateY(-5px);
box-shadow: none;
opacity: 0.9;
}
}
/* CSS styles for different cards */
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90f2ffffe4e3e4e2f1e0d0a4bea6bea2">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLM... crossorigin="anonymous">
<div class="container-fluid">
<h1 class="mt-5">Bootstrap 4 Horizontal Scrolling</h1>
/* Further code with card elements */