white space

[worn lance]

when i have to scroll on this page, white space appears on the bottom. i can provide my code if needed as well

[zealous wolf]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[lone spear]

Please provide the code that would be useful to debug

[worn lance]

export default function Home() {
return (
<div className="flex flex-col min-h-screen">
<NavBar/>
<div className="flex justify-center w-full flex-1">
<div className="flex justify-center items-center w-4/5 md:w-7/9 lg:w-screen flex-col lg:flex-row">

      <div className="flex w-2/3 md:w-4/9 xl:w-1/3 h-auto lg:ml-8 pb-8">
        <Image/>
      </div>

      <div className="flex w-full xl:w-2/3 h-auto lg:ml-10 lg:mr-8 flex-col items-center">
        <div className="flex text-3xl lg:text-4xl xl:text-5xl font-semibold pb-6 font-libre leading-[1.3] lg:leading-[1.7]"></div>
        <div className="text-lg font-poppins"></div>
        <div className="mt-4 md:mt-8">
          <Link href="/Consulting" className="md:text-xl m-8 font-poppins bg-white px-3 py-1.5 rounded-xl"></Link>
          <Link href="" className="md:text-xl m-8 font-poppins bg-white px-3 py-1.5 rounded-xl">Schedule</Link>
        </div>
      </div>
    </div>
  </div>
</div>

);
}

heres the navbar im using
export default function App() {
const [isOpen, setIsOpen] = useState(false);
const [timeoutId, setTimeoutId] = useState<number | null>(null);
const delay = 300;

return (
<Navbar maxWidth="xl" className="relative overflow-hidden bg-bgblue font-poppins md:pl-[calc(100vw-100%)] py-4">
<Link className="bg-transparent p-0 flex" href="">
<NavbarItem>
<Dropdown isOpen={isOpen} disableAnimation={true}>
<DropdownTrigger>
<Button
onMouseEnter={() => {
if (timeoutId !== null) clearTimeout(timeoutId);
setIsOpen(true);
}}
onMouseLeave={() => {
const id = window.setTimeout(() => setIsOpen(false), delay);
setTimeoutId(id);
}}
disableRipple={true}
disableAnimation={true}
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-xl"
>
</Button>
</DropdownTrigger>
<DropdownMenu
onMouseEnter={() => {
if (timeoutId !== null) clearTimeout(timeoutId);
setIsOpen(true);
}}
onMouseLeave={() => {
setIsOpen(false);
}}
>
</DropdownMenu>
</Dropdown>
</NavbarItem>
</NavbarContent>
</Navbar>
);
}

sorry if its messy

[lone spear]

Which component library?

@jor Can you share github link?

[worn lance]

oh yeah mb you didnt ping me correctly LMAO

[worn lance]

https://github.com/kimjoe1008/lumoslearning

[worn lance]

heroui

[lone spear]

404 Not found

[worn lance]

uhhhh

try again @lone spear

and ignore how uh

messy the code and everything is...

its a wip

:D

[lone spear]

Checking

[worn lance]

ok ty

take your time

the project is for a friend

[lone spear]

This white space at the end?

@worn lance Problem is this section
Since links(anchor tags) are inline (top and bottom margin and padding on them are not respected by the parent div)
here you can see that box model of div doesn't respect top and bottom padding of the links, to do so you can simple add inline block in the link.

<div className="mt-4 md:mt-8">
  <Link
    href="/Consulting"
    className="md:text-xl mx-8 font-poppins bg-white px-3 py-1.5 rounded-xl inline-block"  // -> Added inline-block
  >
    Consulting
  </Link>
  <Link
    href="https://calendly.com/noahktutoring/30min"
    className="md:text-xl m-8 font-poppins bg-white px-3 py-1.5 rounded-xl inline-block"  // -> Added inline-block
  >
    Schedule
  </Link>
</div>

Adding that will make it like this

[worn lance]

is that why my navbar is making my scrollbar disappear?

[worn lance]

ohhhhhhhhh ok thank you so much

i didnt know about inline stuff

[lone spear]

No, Navbar making scrollbar disappear is due to dropdown.

In navbar, dropdown menu you can set shouldBlockScroll to false.

<Dropdown
  isOpen={isOpen}
  disableAnimation={true}
  shouldBlockScroll={false}   // Here you can set this to false by default it's true.
>
  <DropdownTrigger>
    <Button
      onMouseEnter={() => {
        if (timeoutId !== null) clearTimeout(timeoutId);
        setIsOpen(true);
      }}
      onMouseLeave={() => {
        const id = window.setTimeout(() => setIsOpen(false), delay);
        setTimeoutId(id);
      }}
      disableRipple={true}
      disableAnimation={true}
      className="p-0 bg-transparent data-[hover=true]:bg-transparent text-xl"
    >
      College Consulting▾
    </Button>
  </DropdownTrigger>
  <DropdownMenu
    onMouseEnter={() => {
      if (timeoutId !== null) clearTimeout(timeoutId);
      setIsOpen(true);
    }}
    onMouseLeave={() => {
      setIsOpen(false);
    }}
    aria-label="Lumos Tutoring Consulting Menu"
    disabledKeys={['Acceptances', 'Testimonials']}
    className="flex"
    itemClasses={{
      base: 'gap-4',
    }}
  >
    <DropdownItem
      key="Admissions Consulting Services"
      href="/Consulting"
    >
      Admissions Consulting Services
    </DropdownItem>
    <DropdownItem key="College Essay Coaching" href="#">
      College Essay Coaching
    </DropdownItem>
    <DropdownItem key="About Noah" href="/AboutMe">
      About Noah
    </DropdownItem>
    <DropdownItem key="Acceptances" href="#">
      Acceptances
    </DropdownItem>
    <DropdownItem key="Testimonials" href="#">
      Testimonials
    </DropdownItem>
  </DropdownMenu>
</Dropdown>

[worn lance]

WHAT THATS A THING

I SWEAR I READ THE DOCS

maybe im just dumb

thank you @lone spear

youre the goat

[lone spear]

🫡👍

[worn lance]

while i got you here you wanna help me with my heroui problem.....

[lone spear]

I'll try

[worn lance]

is it okay if i ping you in it or should i explain it here