'What css rule can I apply to get rid of the excessive white space?

I am trying to get rid of excessive space below the content on the page, and get the height to fit the content - What can I do. Currently I am setting the height of to auto (please see code below, and the app can be seen here: https://rick-morty-five-pi.vercel.app/):

<span key={id} className=" p-3">
                  <li className="flex justify-center">Planet Name: {name} </li>
                  <li className="flex justify-center">Planet Type:{type}</li>
                  <ResData className="h-auto" residents={residents} />
                </span>
javascriptcssflexbox


Solution 1:[1]

Really unsure of what part of the page you are referring to, but if its the main page you linked to, and your referring to the space underneath all of the cards. You gave your list of items an all around padding of 1.5rem. So there is 1.5rem worth of white space below your content.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 alechristopher

Related Questions