I know your all busy, and any time you give me I value highly and would be greatly appreciated.
I'm trying to create a Youtube like layout with the video player, a sidebar and comments underneath the video. I'm trying to use a grid with Tailwind CSS, but the comment section (3 and 4) aren't going underneath the video player (1). This is the desktop layout I was thinking:
enter image description here
The order when in mobile should be video, sidebar then comments.
Heres my code so far:
<div class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-6">
<div class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100 col-end-auto md:col-span-8" style="height: 200px;">1</div>
<div class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100 col-end-auto md:col-span-4" style="height: 400px;">2</div>
<div class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100 col-end-auto md:col-span-4">3</div>
<div class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100 col-end-auto md:col-span-4">4</div>
</div>
</div>
I'm very great full for any help.
Assuming you like the way everything works above mobile size (sm and up). You can add order utility classes order-1, order-2 etc. to your major elements and sm:order-none to them as well to make sure the order only applies on mobile.
Here's an example on Tailwind Play https://play.tailwindcss.com/RX1JQHMYgo
Related
I'm making a blog using NextJS and TailwindCSS. I've made a card, that the button overlays the card image right in the middle. But the button stays a little higher. Image:
And here is the code:
<div className="relative max-w-5xl mx-auto px-2 grid grid-cols-3">
<div className="relative overflow-hidden flex items-center justify-center flex-col">
<Image
src={
"https://static.wixstatic.com/media/5bfb6f_9f2519d5fc2d41f990a10dd92eb8658d.jpg/v1/fill/w_393,h_325,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/5bfb6f_9f2519d5fc2d41f990a10dd92eb8658d.jpg"
}
width={314}
height={314}
alt="Image"
className="object-cover"
/>
<div className="absolute w-full h-full top-0 bottom-0 left-0 right-0">
<button className="text-xl px-4 py-2 rounded text-blue-600 bg-white absolute bottom-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">Travel</button>
</div>
</div>
</div>
I've tried using absolute and relative positions. I've also tried using flexbox. But nothing worked. I'm expecting that the button will overlay on the image right on the center.
There are many ways to do this, but I think the easiest fix here is, instead of using absolute for the button, just add flex items-center justify-center to the parent class of button like this:
<div class="relative max-w-5xl mx-auto px-2 grid grid-cols-3">
<div class="relative overflow-hidden flex items-center justify-center flex-col">
<img
src="https://via.placeholder.com/314x314"
width="314"
height="314"
alt="Image"
class="object-cover"
/>
<div class="absolute w-full h-full top-0 bottom-0 left-0 right-0 flex items-center justify-center">
<button class="text-xl px-4 py-2 rounded text-blue-600 bg-white">Travel</button>
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
I have a small flex container with a text and two buttons inside
On mobile I want each element to be stacked in column and the buttons to take the full width of the container.
On wider screens it should all be on the same row with the text being at the left and the two buttons at the right, with some spacing in between.
But instead, on wider screens, after making the mobile layout as desired, the buttons on the right became a bit too wide and the spacing between them is gone, making them stuck to each other.
This is the code (which for the very most part I'm just tweaking as it was written by someone else in my team):
<div class="align-center sm:h-50 flex-col sm:flex-row py-30 sm:py-0 flex items-center border-b border-gray-50 px-10 sm:px-30 ">
<div style="flex-basis: 70%; class=">
<p class="text-md p-0 mt-0">Baby Baby</p>
</div>
<div style="flex-basis: 15%;" class="w-full">
<a class="outline-none focus:outline-none flex sm:w-100 text-xs rounded-full bg-primary-400 text-white p-5 focus:outline-none no-underline"">
<p class="font-pt-sans font-bold m-auto">Send e-mail</p>
</a>
</div>
<div style="flex-basis: 15%;" class="w-full">
<button class="w-full outline-none focus:outline-none flex flex-col flex-none flex-col text-xs rounded-full text-gray-400 border p-5" type="button">
<p class="font-pt-sans font-bold m-auto">Copy link</p>
</button>
</div>
</div>
I found that the culprit for the faulty layout on wider screens is sm:w-100 here:
<a class="outline-none focus:outline-none flex sm:w-100 text-xs rounded-full bg-primary-400 text-white p-5 focus:outline-none no-underline"">
I need the w-100 to only apply from small screens and above. But for some reason it doesn't apply it at all, the only way for it to work is to remove the sm breakpoint. But then it also applies this width for mobile, which I don't want.
What am I missing here? I've read through the documentation and other similar questions but can't figure it out. Thank you.
There is too much not needed code there to achieve what you want.
You can do it by simplifying it a lot and this is how you do it:
<div class="flex w-full flex-col items-center justify-center space-y-4 space-x-0 md:flex-row md:space-x-4">
<p class="flex-1 text-center md:text-start">Baby Baby</p>
<button class="font-pt-sans w-fullitems-center flex w-full justify-center rounded-full border p-5 text-xs font-bold text-gray-400 outline-none focus:outline-none md:w-auto" type="button">Send Email</button>
<button class="font-pt-sans w-fullitems-center flex w-full justify-center rounded-full border p-5 text-xs font-bold text-gray-400 outline-none focus:outline-none md:w-auto" type="button">Copy link</button>
</div>
You can play with it here: https://play.tailwindcss.com/zA2Rn1LYEv?size=476x720
Also please read about breakpoints and responsive design here: https://tailwindcss.com/docs/responsive-design#overview
This is how it looks on big screens:
This is how it looks on small screens:
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>
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:
Relative Length Units at MDN
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">
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 */
}
Using tailwind css and using this snippet of code:
<a href="#" class="flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700">
<img class="object-cover w-full h-96 rounded-t-lg md:h-auto md:w-96 md:rounded-none md:rounded-l-lg" src="/docs/images/blog/image-4.jpg" alt="">
<div class="flex flex-col justify-between p-4 leading-normal"> <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5> <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</div>
</a>
https://flowbite.com/docs/components/card/
If I upload an image of 960x540 pixels, it works as expected. However, if I upload an image of 1920x1080, it leaves a 2-4 pixel gap on the top and to the right.
If I upload something 1923x1080, it fits perfectly.
Why do certain sizes not work correctly?
I'm using PNG files, not sure if that matters.
I have this div that's supposed to represent a button next to an input. Ideally on resolution change, the input element's width shrinks but the button stays the same height and width.
<div className="flex flex-row rounded-lg border border-white border-solid hover:cursor-pointer py-2 px-2 w-28">
<AddIcon></AddIcon>
<div className="flex font-sans text-base font-medium">Add site</div>
</div>
I set the w-28 property thinking it could achieve this. However, the button changes width if I shrink the window or screen it appears on, and I'm not sure why.
This is the full component:
<div id="settings" className="w-3/4 h-5/6 bg-blue-300 self-center">
<div id="settings-content" className="flex flex-col self-center mx-5">
<div id="header" className="flex flex-col mt-5">
<div id="title" className="font-sans font-bold text-3xl">Block Sites</div>
</div>
<div id="subtitle" className="font-sans text-base font-medium text-neutral-600">Visiting these sites will stop point acquisition until you reset the timer</div>
<div id="block-site-add-list" className="flex flex-row mt-16 justify-between bg-amber-400 shrink-0">
<div className="flex flex-row rounded-lg border border-white border-solid hover:cursor-pointer py-2 px-2 w-28">
<AddIcon></AddIcon>
<div className="flex font-sans text-base font-medium">Add site</div>
</div>
<input className="ml-5 flex-grow bg-red-500"></input>
</div>
</div>
</div>
This is what the button looks like with a smaller screen, when both words should be on the same line:
You could try adding whitespace-nowrap to your label div to ensure that the text doesn't wrap to two lines. Since you have your elements (button and input) wrapped in another flex, you can add shrink-0 to your wrapper div to keep its size.
For example:
<div id="block-site-add-list" className="flex flex-row ...">
<div className="shrink-0 flex flex-row ...">
<AddIcon></AddIcon>
<div className="whitespace-nowrap font-sans text-base font-medium">Add site</div>
</div>
<input className="ml-5 grow bg-red-500"></input>
</div>