Code to review here:
/* Styling for buttons */
.....
}
/* Button hover effect */
.button:hover {
background-color: #f1f1f1;
}
/* Styling for the swipeable container */
.swipe-container {
display: flex;
justify-content: center;
align-items: center;
overflow-x: auto; /* Enable horizontal scrolling */
scroll-snap-type: x mandatory; /* Smooth snap effect */
-webkit-overflow-scrolling: touch; /* Enable smooth scrolling on mobile devices */
padding: 10px;
}
/* Flexbox items alignment */
.swipe-container a {
flex-shrink: 0; /* Prevent shrinking */
margin: 4px 10px; /* Spacing between buttons */
scroll-snap-align: center; /* Ensure snapping happens in the center */
}
/* Centering buttons and making the swipe responsive on smaller screens */
@media (max-width: 768px) {
.swipe-container {
justify-content: flex-start; /* Align buttons to the start */
}
}
My requests:
I want to have a smoother and stable swipe functionality without the container around. Buttons should show on desktops in the centre as well and stay fixed, not swiping like for the mobile version. Moreover, I want to eliminate the slight “up and down” sensibility with the swipe motion.