I've came into a very weird problem in playing around grid display in css, the code below works (shows all the images) if only I have at least 1 image that is not set on absolute positioning, else, all of them disappear. Any ideas or workarounds on this?
<div className="grid grid-cols-2">
<div className="shapeA overflow-hidden aspect-square relative">
<img src="/mizuki.png" className="absolute z-20 opacity-[0.7]" />
<div className="w-full h-full absolute bg-ni25-30 z-10 blur-sm opacity-[0.5] backdrop-blur-sm"></div>
</div>
<div className="shapeB overflow-hidden aspect-square relative">
<img src="/ena.png" className="absolute z-20 opacity-[0.7]" />
<div className="w-full h-full absolute bg-ni25-30 z-10 blur-sm opacity-[0.5] backdrop-blur-sm"></div>
</div>
<div className="shapeC overflow-hidden aspect-square relative">
<img src="/mafuyu.png" className="absolute z-20 opacity-[0.7]" />
<div className="w-full h-full absolute bg-ni25-30 z-10 blur-sm opacity-[0.5] backdrop-blur-sm"></div>
</div>
<div className="shapeD overflow-hidden aspect-square relative">
<img src="/kanade.png" className="absolute z-20 opacity-[0.7]" />
<div className="w-full h-full absolute bg-ni25-30 z-10 blur-sm opacity-[0.5] backdrop-blur-sm"></div>
</div>
</div>
You have to set a width to the element, otherwise it wont display all the items correctly. A working jsfiddle would work a lot better, or a link to the page in question
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>
Here I want these tick elements to stay behind the image and only show those ticks that image does not cover and I want that tick elements relative to these images. So I made these these ticks absolute and the parent div relative. But the problem is it is showing tick marks in front of the image. I tried to remove them with z-index but z-index did not work.
What could be the solution for this?
<div className=' relative flex justify-around '>
<div className='grid grid-cols-1 sm:grid-cols-2 w-full lg:w-1/2'>
<div className='flex justify-end mr-12 relative'>
<img className=' ' src={data.imgLink} alt="" />
<img className=' absolute top-4' src="/image/thirdpart/Group 7.png" alt="" />
</div>
<div className='text-white flex flex-col justify-center min-w-80 ml-14 sm:ml-0'>
<div className='text-2xl font-bold mb-4'>{data.title}</div>
<div>{data.description}
</div>
<div className='bg-[#239CAC] w-fit p-4 rounded-full my-5 font-semibold cursor-pointer'>
<button>Read the documentation</button>
</div>
</div>
</div>
<div></div>
</div>[![enter image description here][1]][1]
I am trying to create a homepage that has two columns, one with text and another with a carousel of images.On web view, the layout looks great, but on mobile view, the images are compressed leaving a lot of space around. I have tried setting the image height to full with h-full which doesn't work. How can i make the image occupy the full grid height on mobile view as well? Any recommendations / references will be appreciated.
My code :
<section className="p-9">
<div className="min-h-screen grid grid-cols-1 sm:grid-cols-2 md:grid-cols-8 lg:grid-cols-8 items-center pt-9">
<div className="col-span-2">
<p className="font-bold text-4xl mb-4 ml-4">
A construction <span className="text-red-600">ecosystem</span> that is
simple, transparent and <span className="text-red-600">efficient</span>
</p>
</div>
{/* <div className="h-full col-span-6">
<img className="w-full h-full m-2" src={carousel1} />
</div> */}
<div
id="carouselExampleCrossfade"
className="absolute carousel slide carousel-fade carousel-dark relative col-span-6 m-2"
data-bs-ride="carousel"
>
<div className="carousel-inner relative w-full h-full overflow-hidden">
<div className="carousel-item active float-left w-full bg-no-repeat bg-cover">
<img
src="https://www.shell.com/business-customers/construction-and-road/about-construction-and-road/_jcr_content/pagePromo/image.img.960.jpeg/1652883928742/two-engineers-working-on-a-construction-site.jpeg"
className="block w-full h-full rounded"
alt="Wild Landscape"
/>
<Link
href={`/service`}
className="absolute bottom-0 left-0 m-6 py-2.5 px-2.5 bg-red-600 text-white font-medium text-md leading-tight rounded hover:text-red-700 hover:bg-gray-100 focus:bg-none focus:outline-none focus:ring-0 active:bg-gray-200 transition duration-150 ease-in-out"
>
<span>{"Testing"}</span>
</Link>
</div>
</div>
</div>
</div>
</section>;
Link to code here
Current view on mobile:
Current view on web:
I'm trying to add / style 3 boxes stacked on top of each other and then attach an image to it as such
https://i.stack.imgur.com/jVdIo.png
I was able to achieve this but it's leaning side ways
https://i.stack.imgur.com/fl0Zz.png
<div className='flex flex-col box-border rounded strok h-60 w-48 p-4 border-2 ...'>
<div className=' box-border rounded strok h-32 w-32 p-4 border-8 bg-black ...'>
<div className=' box-border rounded strok h-32 w-32 p-4 border-8 bg-black ...'>
<div className=' box-border rounded strok h-32 w-32 p-4 border-8 bg-black ...'></div>
</div>
</div>
</div>
You have all the boxes nested with padding. Since they're nested, they're considered children. The parents have padding. Consider having a parent with a position of relative and the 3 boxes having a position of absolute.
<div class="h-screen w-screen bg-gray-200 py-20 flex justify-center items-center sm:py-12">
<div class="h-40 w-40 relative">
<div class="rounded h-[150px] w-[150px] bg-red-700 absolute z-30 left-1">
</div>
<div class="rounded h-[150px] w-[134px] bg-slate-500 absolute z-20 top-3 left-3"></div>
<div class="rounded h-[142px] w-[118px] bg-black absolute z-10 top-8 left-5"></div>
I made an example for you on tailwind playground https://play.tailwindcss.com/MJnaFMVio6
This is how to implement that:
<!-- Background -->
<div class="mx-auto h-[500px] w-[500px] flex justify-center items-center bg-blue-500 relative p-[10px]">
<!-- Boxes container -->
<div class="relative">
<div class="relative mt-4 mx-4 h-full">
<!-- Boxes stacked behind -->
<div class="absolute -bottom-4 scale-[0.85] origin-bottom inset-x-0 h-full w-full bg-white/40 backdrop-blur-md rounded-2xl"></div>
<div class="absolute -bottom-2 scale-95 origin-bottom inset-x-0 h-full w-full bg-white/40 backdrop-blur-md rounded-3xl shadow-sm"></div>
<!-- Box on top -->
<div class="p-4 bg-white/60 backdrop-blur-md rounded-3xl h-full">
<img class="rounded-[20px]" src="https://variety.com/wp-content/uploads/2021/07/Rick-Astley-Never-Gonna-Give-You-Up.png">
</div>
</div>
</div>
</div>
On Tailwind play: https://play.tailwindcss.com/dmU2c4ai36
I need to programm the following design
I want to give the big image in the middle (dark red) the rematining space of my flexcontainer, where the yellow stuff is margin/paddings. The problem i have here is, that my image always overlapps the flex container and also the images in the bottom and the svgs. I dont want to give the image a fixed height nor some percentage values because i want to keep it responsive and dynamicaly. Here is my code:
<div
class="flex flex-col flex-1 fixed bg-black w-auto inset-x-11 inset-y-10 z-1003">
</svg>
<div class="fixed flex flex-1 flex-col inset-x-20 inset-y-20">
<div class="flex h-3/4 justify-center items-center">
<svg
</svg>
<img
class="mx-6 w-5/6 h-full bg-gray-light border-2 rounded-md"
My Big Image
/>
<svg
</svg>
</div>
<div class="flex w-full flex-row flex-1 items-end justify-center mt-6">
<div v-for="img in 3" class="mx-6 bg-black-normal rounded-lg">
<img
the orange images
/>
</div>
</div>
</div>
The best solution here would be for me to remove every heights and only work with flex flex-1 flex-shrink and so on but its not working properly as expected.
You can do this in many ways. Flexboxes are good approach, but for for thumbnails images I would use grid to make them even (but sure flexboxes can by used as well).
It does not matter if you use SVG or not for buttons. But if you have any problem with them - please provide real reproduction example (https://play.tailwindcss.com/ can be usefully).
Demo: https://play.tailwindcss.com/RsXsrdSYG3
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="min-h-screen bg-gray-50 p-8 flex flex-col">
<div class="flex items-center">
<button class="flex-none w-16 h-16 bg-gray-500">PREV</button>
<div class="px-6">
<img src="https://via.placeholder.com/1920x1080" />
</div>
<button class="flex-none w-16 h-16 bg-gray-500">NEXT</button>
</div>
<div class="mt-6 grid grid-cols-3 gap-6">
<img src="https://via.placeholder.com/1920x1080" />
<img src="https://via.placeholder.com/1920x1080" />
<img src="https://via.placeholder.com/1920x1080" />
</div>
</div>
Or if you want to fill screen height (but empty space will be visible over big image to keep responsive ratio).
Demo: https://play.tailwindcss.com/hTYuGjPHHk
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="h-screen bg-gray-50 p-8 flex flex-col">
<div class="flex items-center flex-1">
<button class="flex-none w-16 h-16 bg-gray-500">PREV</button>
<div class="px-6 h-full flex items-center">
<img src="https://via.placeholder.com/1920x1080" />
</div>
<button class="flex-none w-16 h-16 bg-gray-500">NEXT</button>
</div>
<div class="mt-6 grid grid-cols-3 gap-6">
<img src="https://via.placeholder.com/1920x1080" />
<img src="https://via.placeholder.com/1920x1080" />
<img src="https://via.placeholder.com/1920x1080" />
</div>
</div>