KPC
Kevin Powell - Community•17mo ago
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; 
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.
No description
1 Reply
Wolle
Wolle•17mo 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?

Did you find this page helpful?