CODEWITHSUNDEEP
responsivetailwind-css
goda
goda

Reputation: 196

Responsive layout with tailwind

I am working on a responsive layout with Tailwind. On large screens I have a fixed header and a fixed sidebar. On smaller resolutions, the sidebar is hidden and the header is no longer fixed. The content will always take a minimum of the screen.

The lines that don't feel quite are the manual padding left and right because of the fixed nature. Is there a better solution to this? I don't particularly like it because if I remove the sidebar, the padding doesn't automatically adjust.

https://codepen.io/tingaloo/pen/qBWzVqP

    <div class="App flex min-h-screen">
      <div class="hidden lg:flex h-screen bg-green-300 fixed w-40">sidebar</div>
      <div class="flex bg-gray-300 lg:pl-40 w-full flex-wrap">
        <div class="flex h-20 w-full lg:pr-40 lg:fixed bg-red-300 justify-between">
          <div class="">Header left</div>
          <div class="">Header right</div>
        </div>
        <div class="bg-blue-400 pt-20 w-full">
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
        </div>
      </div>
    </div>

Upvotes: 1

Views: 2643

Answers (1)

さりげない告白
さりげない告白

Reputation: 1497

Utilize the sticky position instead of fixed, so that it will still take up space.

To accomplish this, change fixed to sticky top-0 then you can get rid of lg:pl-40 and lg:pr-40

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.4/tailwind.min.css" rel="stylesheet"/>
    <div class="App flex min-h-screen">
      <div class="hidden lg:flex h-screen bg-green-300 sticky top-0 w-40">sidebar</div>
      <div class="flex bg-gray-300 w-full flex-wrap">
        <div class="flex h-20 w-full lg:fixed bg-red-300 justify-between">
          <div class="">Header left</div>
          <div class="">Header right</div>
        </div>
        <div class="bg-blue-400 pt-20 w-full">
          <div class="h-20">First Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Last Content</div>
        </div>
      </div>
    </div>

Upvotes: 2

Related Questions