MobileNavBar sizing issue

[Sami-Krothapalli]

Hi, I am currently at 1:15:05 of the video, but for some reason, the h1 of the mobile nav bar appears very small. Has anyone encountered this issue before, and if so, how to solve it?

Code for it here:

const MobileNav = ({user}: MobileNavProps) => {
    const pathname = usePathname();
    return (
        <section className='w-full max-w-[264px]'>
        <Sheet>
            <SheetTrigger>
                <Image
                    src="\icons\hamburger.svg"
                    width={30}
                    height={30}
                    alt="menu"
                    className='cursor-pointer'
                />
            </SheetTrigger>
            <SheetContent side="left" className='border-none bg-white'>
                <Link href='/'className='cursor-pointer flex items-center gap-1 px-4'>
                        <Image 
                            src='/icons/logo.svg'
                            width={34}
                            height={34}
                            alt="Bankify Logo"
                        />
                        {/* Figure out why the font size is not increasing */}
                        <h1 className='text-26-font-ibm-plex-serif font-bold text-black-1'>Bankify</h1> 
                </Link>
                <div className='mobilenav-sheet'>
                    <SheetClose asChild>
                        <nav className='flex h-full flex-col gap-6 pt-16 text-white'>
                            {sidebarLinks.map((item) => {
                                const isActive = pathname === item.route || pathname.startsWith('${item.route}/')
                                return (
                                    <SheetClose asChild key={item.route}>
                                        <Link href={item.route} key={item.label} className={cn('mobilenav-sheet_close w-full', {'bg-bank-gradient': isActive})}>
                                            <Image 
                                                src={item.imgURL}
                                                alt={item.label}
                                                width={20}
                                                height={20}
                                                className={cn({
                                                    'brightness-[3] invert-0': isActive})}
                                            />  
                                        <p className={cn("text-16 font-semibold text-black-2", { "text-white": isActive })}>
                                            {item.label}
                                        </p>
                                        </Link>
                                    </SheetClose>
                            )})}           
                        </nav>
                    </SheetClose>
                </div>
        </SheetContent>
    </Sheet>

    </section>
  )
}

export default MobileNav

[akashkennedy]

Hey It might be an issue with the globals.css preflight styles. Check the h1 tag in the globals file.