How do i make my site responsive for all heights and widths?

Mohammad Mustak Absar Khan 0
Viewed 53

I am trying to understand TailwindCSS and currently trying to make responsive employee card. But the problem i have recently encountered is that my card seems responsive for all breakpoints of tailwind but only when the height is 900. Whenever i increase the height i get more space at the bottom and whenever i shrink the window height the contents get overflowed.

How do i make it responsive for all heights and widths?

[Works perfectly only when the height is 900 and within Tailwind Breakpoint Width Range]
Here is the Live Site Preview
Here is the Github Repo-Code

Code -

<body class="flex justify-center items-center h-screen w-full">

<div class="main-container bg-slate-500 min-h-3/6 w-8/12 sm:w-8/12 sm:min-h-3/6 md:w-7/12 md:min-h-2.5/6 lg:w-5/12 lg:min-h-2.5/6 xl:w-4/12 xl:min-h-2.5/6 2xl:w-3.5/12 2xl:min-h-4/6 flex justify-center items-center py-20">
    <div class="container bg-slate-200 w-8/12 h-4/6 flex flex-col rounded-lg">
        <div class="title py-4 px-5 font-bold">The title of the card here</div>

        <div class="review-date grid grid-cols-2 bg-white w-full h-1/6 items-center p-2 px-4 text-center">
            <div class="review flex justify-center items-center text-xs bg-orange-700 text-white font-semibold p-1 sm:w-10/12 sm:py-1 rounded-full uppercase select-none">
                UNDER REVIEW
            </div>
            <div class="date flex justify-end items-center text-xs font-semibold select-none">
                May 14, 1988
            </div>
        </div>
        <div class="comment bg-white border-t border-slate-100 w-full">
            <p class="commentdata bg-slate-200 text-left text-sm p-3 m-4 rounded-lg select-none">Here is a short comment about this employee.</p>
        </div>

        <div class="employeedata px-4 pt-2 pb-4">
            <div class="employee uppercase">
                <label class="text-xs font-bold text-slate-600">Employee</label>
            </div>
            <div class="employeebar flex mt-2">
                <div class="employee-logo bg-sky-800 text-white text-xs font-bold w-10 h-10 rounded-full flex justify-center items-center">VG</div>
                <div class="employee-info flex flex-col ml-4">
                    <div class="employee-name text-sm font-bold flex pb-0.5">Mohammad Mustak</div>
                    <div class="employee-title text-xs text-slate-600">Web Developer</div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
tailwind-css css
3 Answers

How do i make it responsive for all heights and widths?

Declare width, height, padding etc. using:

Viewport Units

  • vw
  • vh
  • vmin
  • vmax

and then, if needed:

Small Viewport Units

  • svw
  • svh

Large Viewport Units

  • lvw
  • lvh

Dynamic Viewport Units

  • dvw
  • dvh

Further Reading:

Rounin - Standing with Ukraine0

Using Minimum Height to the main-container did solve the issue.

    <div class="main-container bg-slate-500 min-h-3/6 w-8/12 sm:w-8/12 sm:min-h-3/6 md:w-7/12 md:min-h-2.5/6 lg:w-5/12 lg:min-h-2.5/6 xl:w-4/12 xl:min-h-2.5/6 2xl:w-3.5/12 2xl:min-h-4/6 flex justify-center items-center py-20">
Mohammad Mustak Absar Khan0

I would have suggested using bootstrap instead of tailwind, but in this case you will need to manipulate the tailwinds css to be able to get whatever you desire using media queries that has min-height in them:

@media all and (max-height: 600px) {
  /* your css after this line */
}
Liemannen loop0
Related