Question 45778 in CSS Question posted in
Some basic documentation can be found here.

TailwindCSS – content larger than screen when adding components

I am in the progress of learning React and TailwindCSS. I am currently trying to build a simple portfolio with a front page and a nav bar for some other pages. I have created the skeleton for my front page, but when I add the nav bar (header) the content gets larger then the screen in both height and width which adds whitespace in the bottom and to the right.

I’ve tried messing around with the h-screen/w-screen and h-full/w-full tags, but I am unable to make anything work.

My App.js looks like this:

import React from "react";
import About from "./components/About";
import Navbar from "./components/Navbar";

export default function App() {
  return (
    <main className="m-0 w-screen h-screen bg-gray-50 body-font text-gray-600 font-display">
      {/* <Navbar /> <-- Adding this causes the issue */}
      <About />
    </main>
  );
}

My Navbar.js component looks like this:

import React from "react";

export default function Navbar() {
  return (
    <header className="bg-gray-50 md:sticky top-0 z-10">
      <div className="container mx-auto flex p-5 flex-col items-end">
        <nav className="md:mr-4 md:py-1 md:pl-4 flex flex-wrap items-center text-base justify-center">
          <a href="#projects" className="mr-5 hover:text-blue-500">
            Past Work
          </a>
          <a href="#skills" className="mr-5 hover:text-blue-500">
            Skills
          </a>
          <a href="#testimonials" className="mr-5 hover:text-blue-500">
            Testimonials
          </a>
        </nav>
      </div>
    </header>
  );
}

And my frontpage (About.js) looks like this:

import React from "react";

export default function About() {
    return (
      <section id="about" className="h-full w-full">
        <div className="container h-full w-full mx-auto my-auto flex px-10 py-20 md:flex-row flex-col items-center">
          <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
            <h1 className="title-font sm:text-5xl text-4xl mb-4 font-extrabold text-blue-500">
              NAME HERE
            </h1>
            <p className="mb-8 leading-relaxed">
              Developer
            </p>
            <div className="flex flex-col justify-center">
              <a href="mailto:[email protected]">[email protected]</a>
            </div>
          </div>
        </div>
      </section>
    );
  }

All help is appreciated, thanks!

Tags:

2

Answers


  1. 0

    The issue is that you have the navbar set to sticky and the About page also has the container class on it, which causes the overflow. An option you could use is to just swap out the sticky class on the navbar for fixed and adding the w-full class aswell, fixed position, unlike sticky position, removes the element from the document flow, allowing the About page to take up the space. This brings the issue of the About page and navbar content overlapping which you can fix by adding the height of your navbar as a top padding on your about container. Heres the code

    export default function Navbar() {
  return (
    <header className="top-0 z-10 w-full bg-gray-50 md:fixed">
      <div className="container mx-auto flex flex-col items-end p-5">
        <nav className="flex flex-wrap items-center justify-center text-base md:mr-4 md:py-1 md:pl-4">
          <a href="#projects" className="mr-5 hover:text-blue-500">
            Past Work
          </a>
          <a href="#skills" className="mr-5 hover:text-blue-500">
            Skills
          </a>
          <a href="#testimonials" className="mr-5 hover:text-blue-500">
            Testimonials
          </a>
        </nav>
      </div>
    </header>
  );
}

    export default function About() {
  return (
    <section id="about" className="h-full w-full pt-[72px]">
      <div className="container mx-auto my-auto flex h-full w-full flex-col items-center px-10 py-20 md:flex-row">
        <div className="mb-16 flex flex-col items-center text-center md:mb-0 md:w-1/2 md:items-start md:pr-16 md:text-left lg:flex-grow lg:pr-24">
          <h1 className="title-font mb-4 text-4xl font-extrabold text-blue-500 sm:text-5xl">
            NAME HERE
          </h1>
          <p className="mb-8 leading-relaxed">Developer</p>
          <div className="flex flex-col justify-center">
            <a href="mailto:[email protected]">[email protected]</a>
          </div>
        </div>
      </div>
    </section>
  );
}
    Login or Signup to reply.
  2. 0

    The problem is that h-full and w-full in the about section take up 100vh and 100vw, because the parent has h-screen and w-screen, but the navbar has a height and width of itself, which then makes it overflow because the content is bigger than the viewport.

    I think sticky isn’t the right call here, if you want the about section to take up the whole window size. Sticky is more commonly used if you want to scroll and have the element move with it, but if the intention is to have the about-section be the full size of the page. I would put flex and flex-col on the main element and make the about section have flex-1 and remove the w-full and h-full classes, so it takes up the available space and not the size of the parent.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search