Control the height of a hero section in TailwindCSS / React.js

user_17332076 0
Viewed 120

I am trying to create a website using React and Tailwind for the first time.

I want to display a Hero Section at the top and Nav bar at the bottom of the screen.

My strategy for doing this would be to have two separate divs. The hero section at 80vh and the Navbar at 20vh to cover the full page.

When trying to set this up I am trying to set my Hero Component up as such:

const HeroSection = () => (

  <div className="h-4/5 bg-green border-nft-gray-1">Hero Section</div>

);

export default HeroSection;

I am using the documentation of h-4/5 for 80% screenspace as document here:

https://tailwindcss.com/docs/height

Unfortunately the front end does not show this effect and here is the result, the Hero Section is the green div, it does not fill 80%vh but remains as big as high as the content.

enter image description here

Here is where the app is being compiled:

const Marketplace = ({ Component, pageProps }) => (
  <NFTProvider>
    <HeroSection />
    <Navbar />
  </NFTProvider>
);

export default Marketplace;

And here is the Provider im using to transfer data that wraps the two components and what is returns

  return (
    <NFTContext.Provider value={{ nftCurrency, buyNft, createSale, fetchNFTs, fetchMyNFTsOrCreatedNFTs, connectWallet, currentAccount, isLoadingNFT }}>
      {children}
    </NFTContext.Provider>
  );

From I can tell this is not interfering with the CSS in any way, what am I doing wrong in regards to tailwind and how do I achieve my desired composition?

Thanks alot

tailwind-css css html
2 Answers

You have set the height of your div (hero section) to h-4/5 which is indeed 80% height. But that height is only relative to its parent window. In order to do the styling you're thinking of you have to specify that you want the height of the whole viewport.

So change it to <div className="h-[80vh] bg-green border-nft-gray-1">Hero Section</div>

user_185693400

Instead you can provide the height when you use the components.

const Marketplace = ({ Component, pageProps }) => (
  <NFTProvider>
    <HeroSection className="h-4/5" />
    <Navbar className="h-1/5" />
  </NFTProvider>
);

export default Marketplace;

And remove h-4/5 from the herosection component itself .

user_109623640
Related