I am new to HTML and CSS and am creating a website for a basic university course. For a project, I have created 8 div cards highlighting the planets of the Solar System but cannot get the cards out of this fixed/unscrollable position. This is the link to the current page state:

https://hollandtheperson.com/dight/250/website/planets.html

Any tips on how to fix this?

CodePudding user response：

You have added overflow: hidden; for the CSS in the body tag, which hides the scrollbar essentially making the scroll feature unusable, if you remove it then it should work.

CodePudding user response：

You can set the overflow-x instead of overflow to hidden, like so:

...
overflow-x: hidden;
...

This disables horizontal scroll but allows vertical scroll

CodePudding user response：

The problem isn't really with it being fixed in place, but i can see why you got that impression.

You're using overflow: hidden; which means "if something doesn't fit, snip it off".

So, because the overflow has cut away everything wasn't already within the viewport - there is now nothing outside the viewport, and hence, no reason to allow scrolling.

CodePudding user response：

Fixed the .card height and add overflow-x: hidden which give you scrolling card. Sample code given below:

.card{
// add additional code
height: 350px;
overflow-x: hidden;
}

CodePudding user response：

Hi can see that you have added items in css of body tags which i guess you should remove in order make it scrollable feature those are

height: 100vh;
overflow: hidden;

Please check if that works hopefully it should be.