I am quite new to Tailwind CSS and I am trying to set two images inside a banner with first image to take 1/3 of width and second image to take 2/3 of width when this image is viewed on desktop screen. In mobile I need the images to be shown in full width so user can scroll right and left to each image.
Right now my code works fine on desktop but on mobile it shows images in the same arrangement i.e. as 1/3 and 2/3 of screen width, which is not what I want. I have tried targeting md:w-1/3 and 2/3 respectively but it seems to mess up everything.
I also tried using md:grid md:grid-cols-3 in the inner div element and then set the second picture as md:col-span-2 but it did not work.
I would appreciate any guidance on what is wrong with my code. Thank you a lot in advance.
<div class="images-wrapper">
<div class="flex bg-white md:bg-transparent h-full overflow-x-auto md:overflow-x-hidden without-scrollbar gap-1 md:gap-1.5 flex-nowrap h-full w-full flex-grow md:flex-grow-0 flex-shrink-0 md:flex-shrink">
<a class="w-1/3" href="javascript:;">
<img class="object-cover aspect-video object-center min-h-[250px] md:min-h-[227px] max-h-[250px] md:min-h-[227px] md:max-h-[227px] w-full h-full md:rounded-tl-[40px]" src="http://...">
</a>
<a class="w-2/3" href="javascript:;">
<img class="object-cover aspect-video object-center min-h-[250px] md:min-h-[227px] max-h-[250px] md:min-h-[227px] md:max-h-[227px] w-full h-full md:rounded-tr-[40px]" src="http://...">
</a>
</div>
</div>
when u use tailwind css first u need to start building with phone resolution and move up ,so u can use when class="w-full md:w-1/3 lg..." class="w-full md:w-2/3 lg..."
So I figured out the issue next morning, I targeted w-1/3 for md sized screens and set min-width too. Final code looks like:
<div class="images-wrapper">
<div class="flex bg-white md:bg-transparent h-full overflow-x-auto md:overflow-x-hidden without-scrollbar gap-1 md:gap-1.5 flex-nowrap h-full w-full flex-grow md:flex-grow-0 flex-shrink-0 md:flex-shrink">
<a class="w-full md:w-1/3 min-w-full md:min-w-0" href="javascript:;">
<img class="object-cover aspect-video object-center min-h-[250px] md:min-h-[227px] max-h-[250px] md:min-h-[227px] md:max-h-[227px] w-full h-full md:rounded-tl-[40px]" src="http://...">
</a>
<a class="w-full md:w-2/3 min-w-full md:min-w-0" href="javascript:;">
<img class="object-cover aspect-video object-center min-h-[250px] md:min-h-[227px] max-h-[250px] md:min-h-[227px] md:max-h-[227px] w-full h-full md:rounded-tr-[40px]" src="http://...">
</a>
</div>
</div>
Another thing causing the problem was my browser not responding to CSS updates immediately but only after localhost restart so please make sure that your updates to CSS are rendered properly. Thanks to Zemame Youcef Oualid for the advice.
Related
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 */
}
I am trying to make the following happen:
On image hover, at the bottom it will show comments/reactions on the left and name on the right
I cannot get the 2 divs to space between at the bottom and I do not know why.
https://play.tailwindcss.com/jyBq62Ok90 is the working code
You need to set a width, e.g. w-full on the absolute positioned div. Otherwise the div will be as wide as the content and there will be no space between.
See this tailwind play
Hope this helps.
As far as I understood , you need to highlight the comment div below as you hover the image with a space between two divs
You can use group-hover utility with a div wrapper. Below code will help you much more
<script src="https://cdn.tailwindcss.com"></script>
<div class="group">
<div class="group mb-4 flex aspect-auto w-full overflow-visible duration-300 ease-in hover:scale-105 hover:rounded-lg">
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F13%2F2015%2F04%2F05%2Ffeatured.jpg&q=60" class="h-full w-full bg-gray-900 object-cover hover:opacity-40" />
</div>
<div class="bottom-0 mx-4 mb-4 hidden bg-gray-700 px-3 duration-300 group-hover:block group-hover:transition group-hover:ease-in">
<div class="flex justify-between">
<div class="flex text-sm font-medium text-white">
<ChatAlt2Icon class="h-5 w-5 text-white" />
<span class="pl-1 text-white">12</span>
<HeartIcon class="ml-2 h-5 w-5 text-white" />
<span class="pl-1 text-white">12</span>
</div>
<div class="flex text-white">Added: Today</div>
</div>
</div>
</div>
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 want to do this:
But my image stay in right side of div, like that:
Soo I don't know why it's happening, that's my code:
<div class="flex h-full justify-center items-center">
<div>
<h2 class="font-bold text-2xl text-gray-700">Page Not Found 🕵🏻♀️</h2>
<h3 class="mt-3 text-gray-500">Oops! 😖 The requested URL was not found on this server.</h3>
<div class="lg:grid justify-center mt-4">
<BreezeButton
class="
inline-table
w-full
items-center
bg-purple-600
text-white text-xs
font-bold
hover:bg-purple-600 hover:shadow-purple
mt-3
"
:href="route('dashboard')"
>
Back to home
</BreezeButton>
</div>
</div>
<div>
<img src="../../Assets/Img/error404.svg" alt="" />
</div>
</div>
You flexed the wrapper div so it seems to have placed the items in a row by default. Use "flex-col" alongside that in order to place your items in a column.
As #xavi3r mentioned you need to use flex-col, as a reminder, Tailwind uses a mobile-first breakpoint, so you need to set one of the breakpoints to change it to row for large devices as follows lg:flex-row or any other breakpoint!!
I have a navbar on my site, when the site is on mobile size I want to have my hamburger menu overlap the contents of my page.
This is my site :
<!-- logo Start -->
<div class="nav-logo">
<h1>My site</h1>
</div>
<!-- links Start -->
<div
class=
"
w-full
flex
flex-col
items-center
text-5xl
md:pr-20
"
>
<a href="#"
class="block md:inline-block">Work</a>
<a href="#"
class="block md:inline-block">About</a>
<a href="#"
class="block md:inline-block">Contact</a>
<div/>
<!-- links End -->
</nav>
<main>
<article>
<h1>Hello<h1/>
</article>
<main/>
I tried adding relative and z-10 both on my nav-links and nav but they dont work, they still push the content downwards instead of having that div overlap.
Any suggestions on what to do?
You'll have to work with relative absolute and z-index to make this work.
Logic:
Have parent relative having z-index value less than the child absolute div which will be used for navbar.
Output in large device:
Output in smaller device:
Code:
<div class="md:bg-yellow-400 h-screen relative z-0 flex bg-gray-500">
<div class="invisible md:visible bg-blue-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Desktop Navbar
</div>
</div>
<div class="text-4xl">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div
class="absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 md:invisible"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
</div>
Further more you can use this tailwind play link
Refer this for responsive sidebar with / without hamburger menu