Kevin Powell - Community•15mo ago

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;

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.

1 Reply

Wolle•15mo ago

Without beeing able to see it i can only guess. Maybe its collapsing margins. What elements gets selected, when you hover over the space with inspect element?

Gaming

Programming

Small white space at the bottom of my website.