国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

How do I ensure my website displays perfectly on a variety of screen sizes?
P粉006540600
P粉006540600 2023-08-27 08:55:57
0
2
729
<p>I'm trying to understand TailwindCSS and am currently trying to make a <strong>responsive employee card</strong>. But the problem I've recently encountered is that my cards are responsive on all breakpoints in Tailwind, but only when the height is 900. </strong>Whenever I increase the height, there is more space at the bottom, and when I shrink the window height, the content overflows. </p> <p><strong>How do I make it fit all heights and widths? </strong></p> <p>[<strong>Works perfectly only if height is 900 and within Tailwind breakpoint width</strong>]</p><p> This is a live preview</p><p> This is Github Repo-Code</p> <p>Code -</p> <pre class="brush:php;toolbar:false;"><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">Here is the title of the card</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">This 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></pre></p>
P粉006540600
P粉006540600

reply all(2)
P粉680087550

Use the following code to declare width, height, padding, etc.:

Viewport Unit

  • vw
  • vh
  • vmin
  • vmax

Then, if needed:

Small viewport unit

  • svw
  • svh

Large viewport unit

  • lvw
  • lvh

Dynamic viewport units

  • dvw
  • dvh

Further reading:

P粉098417223

Use minimum height to solve the problem of main-container. 

<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">
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template