1 reply

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.

KP-C

Kevin Powell - Community•3y ago•

1 reply

doritollama

Small white space at the bottom of my website.

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;

pls help.

Small white space at the bottom of my website.

Similar Threads

Small white space at the bottom of my website.

Similar Threads

Similar Threads

Similar Threads