My horizontal scrolling demo is not working the way I want, and I don't know why?

HTML-CSS
1

Here’s my demo:

There’s three main problems that I can’t figure out how to solve:

Hiding the scrollbar.

I added

 .scrolling-wrapper {
   -webkit-scrollbar {
     display: none;
  }

in my CSS to hide the horizontal scrollbar, but it’s still showing up anyway. I don’t know why this didn’t work? I’m using Chrome.

2.
Card width & margin display.

I first set my elements to fill the entire browser screen, then I set the margin of “card” class to 50px to get a seperated card look. But the page doesn’t look the way I wanted.

This is how it looks right now:

image
image546×551 7.23 KB

Only 3 sides of white margin are visible. The width of my card element is 100% to the screen width. What I wanted is something like this:

image
width of white margins + width of my card element = 100% to the screen width. 4 sides of white margins are all visible, and the card looks centered on the screen.

How should I change my code to fix this problem?
Solved this myself! I only needed to create inside divs then set their heights in vh.

**I want to add a animated effect to my page, so that when a user scrolls through it, it automatically “bounces” to the next screen, and when they scroll to the end, it bounces back to the first screen. **
It’s similar to how you scroll through your phone’s desktop, only displaying one screen at a time.

I’ve been searching for “css scroll animated effect”, but haven’t found what I wanted. Any idea?

A huge thank you to everyone spending their time to read my post!!! :heart_eyes:

2

You have a flex: 0 0 auto on your card that is telling it to be 100% of its width property, which is 100% of the viewport size. I’m not sure why you have that, get rid of it and the card will become responsive again.

I’m pretty sure you’ll need Javascript for your slideshow idea.

1 Like
4

Thank you InternetFriend! I’ll look into js sildshow animation effect!
I added flex: 0 0 auto to make the cards full width to the viewport. I removed it and they somehow shrank to this:

image.png

Guess I should find other ways to make my cards full width :thinking:

5

I misunderstood the problem, disregard that :stuck_out_tongue:

1 Like
6

Thank you anyway!! I just figured it out xD