Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
1 reply
doritollama

Small white space at the bottom of my website.

I am making a website using react and tailwind but I just came across some white space at the bottom of the website screen when viewing it.

The only thing that has fixed this white space is with overflow-auto on the outermost div in my App.js file. I feel like there is a better way to handle this though. I have tried h-screen, min-h-screen, h-full, and min-h-full and nothing seems to help.

Here is my code:

App.js: 

import "./App.css";
import "./index.css";
import Banner from "./components/Banner";
import InputBar from "./components/InputBar";
import InfoCard from "./components/InfoCard";
function App() {
  return (
    <div className="bg-page min-h-screen font-Orbitron  ">
      <Banner />
      <InfoCard />
      <InputBar />
    </div>
  );
}

export default App;

Every react component in the div only uses padding and margins so I suppose it may not affect the responsiveness?

I have also tried to increase the size of the html in the index.cc folder and app.css folder. I have been googling and on YouTube for 3 hours now 😦 pls help.
image.png
Was this page helpful?
CommunitiesDocsAboutTermsPrivacy