TTC

Theo's Typesafe Cult•2y ago•

5 replies

Gaz

Horizontal scroll bar tailwind

Can someone explain why I'm getting a small horizontal scrollbar on this page (not my project) when the viewport is anything but maximized, so any kind of resized window I'm seeing it, just hard to understand cause, narrowed it down to the <nav /><nav /> section https://shadcn-landing-page.vercel.app/ testing on Chrome

Shadcn/React - Landing template

Free Shadcn landing page for React developers

Solution

There are two elements causing the horizontal scrollbar:

<ul data-orientation="horizontal" class="group flex-1 list-none items-center space-x-1 container h-14 px-4 w-screen flex justify-between" dir="ltr"><ul data-orientation="horizontal" class="group flex-1 list-none items-center space-x-1 container h-14 px-4 w-screen flex justify-between" dir="ltr">

The w-screenw-screen is causing it within the <header><header>

<section class="container grid lg:grid-cols-2 place-items-center py-20 md:py-32 gap-10"><section class="container grid lg:grid-cols-2 place-items-center py-20 md:py-32 gap-10">

This is also causing it just below the <header><header>. It's most likely the grid here.

Jump to solution