I am trying to center the rounded full image between the main cover photo and the left column. For some reason I cannot get it to move from the top left corner and I cannot see what I am doing wrong. I am using Tailwind CSS.
<Head :title="profile.name" />
<div class="relative w-full max-h-screen bg-gray-900 flex justify-start items-center rounded-lg">
<div class="relative flex w-full h-48 bg-gray-700">
<img :src="profile.cover_photo_path" class="cover-bg w-full "/>
<div class="absolute inset-0 bottom-0 left-0">
<img :src="profile.profile_photo_path" class="w-48 h-48 rounded-full border-2 border-red-600"/>
</div>
</div>
</div>
<div class="flex flex-row">
<!-- Left Column -->
<div class="bg-gray-900 w-1/3 h-96 z-0">
</div>
<!-- Right Column -->
<div class="bg-gray-900 w-2/3 h-48 z-0">
<div class="flex flex-row justify-between px-2 items-center h-12 border-b border-red-700">
<div class="text-white text-center font-normal"> Feed </div>
<div class="text-white text-center font-normal"> About </div>
<div class="text-white text-center font-normal"> Photos </div>
<div class="text-white text-center font-normal"> Videos </div>
<div class="text-white text-center font-normal"> Events </div>
<div class="text-white text-center font-normal"> Groups </div>
<div class="text-white text-center font-normal"> Pages </div>
<div class="text-white text-center font-normal"> Followers </div>
<div class="text-white text-center font-normal"> Following </div>
</div>
</div>
</div>
</template>
As far as I understood , you want the circle rounded image in the middle of cover and left sidebar vertically and over them.
So I had created this ,please verify if you want. Else I would rather suggest you to attach a screenshot of what you want .
<script src="https://cdn.tailwindcss.com"></script>
<div class="relative flex max-h-screen w-full items-center justify-start rounded-lg bg-gray-900">
<div class="relative flex h-48 w-full bg-gray-700">
<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg" class="cover-bg w-full" />
<div class="absolute inset-0 top-1/2 left-10 z-10">
<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/IHXoEES.png" class="h-48 w-48 rounded-full border-2 border-red-600" />
</div>
</div>
</div>
<div class="flex flex-row">
<!-- Left Column -->
<div class="z-0 h-96 w-1/3 bg-gray-900"></div>
<!-- Right Column -->
<div class="z-0 h-48 w-2/3 bg-gray-800">
<div class="flex h-12 flex-row items-center justify-between border-b border-red-700 px-2">
<div class="text-center font-normal text-white">Feed</div>
<div class="text-center font-normal text-white">About</div>
<div class="text-center font-normal text-white">Photos</div>
<div class="text-center font-normal text-white">Videos</div>
<div class="text-center font-normal text-white">Events</div>
<div class="text-center font-normal text-white">Groups</div>
<div class="text-center font-normal text-white">Pages</div>
<div class="text-center font-normal text-white">Followers</div>
<div class="text-center font-normal text-white">Following</div>
</div>
</div>
</div>
Related
I am struggeling while trying to center my content vertical and horizontal within a nested div with tailwindcss.
<div class="flex flex-col items-center min-h-screen">
<header class="flex-none text-center w-full">
<p>Header</p>
</header>
<div class="grow w-full">
<div id="home" class="flex justify-center item-center min-h-max">
<main>
<p>Shall be vertical and horizontal center.</p>
</main>
</div>
</div>
<footer class="flex-none text-center m-2 w-full">
<hr class="mx-auto mb-2 sm:w-56 w-36 h-0.5 bg-gray-100 rounded border-0 shadow-2xl" />
<div class="flex sm:flex-row flex-col sm:gap-4 gap-1 justify-center text-sm font-light">
<p>Footer<p>
</div>
</footer>
</div>
The code is also wrapped up here: https://play.tailwindcss.com/5B2w0RGQzm?size=540x1014
I already tried different height and min-height classes, but I am still failing...
https://tailwindcss.com/docs/height
https://tailwindcss.com/docs/min-height
What is the right approach to align everything centered?
try to dispatch your class otherwise and allow yourself to set flex (#child) into flex (from parent) , so it respects your idea and uses flex grid properties through your DOM levels.
Possible example below if i understood your issue:
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col items-center min-h-screen" style="">
<header class="flex-none text-center w-full">
<p>Header</p>
</header>
<div class="flex flex-column grow w-full justify-center items-center">
<div id="home">
<main>
<p>Shall be vertical and horizontal center.</p>
</main>
</div>
</div>
<footer class="flex-none text-center m-2 w-full">
<hr class="mx-auto mb-2 sm:w-56 w-36 h-0.5 bg-gray-100 rounded border-0 shadow-2xl" />
<div class="flex sm:flex-row flex-col sm:gap-4 gap-1 justify-center text-sm font-light">
<p>Footer at bottom <p>
</div>
</footer>
</div>
other possible example:
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col items-center min-h-screen" style="">
<header class="flex-none text-center w-full">
<p>Header</p>
</header>
<div class="flex grow ">
<div id="home" class="flex grow ">
<main class="flex flex-column grow w-full justify-center items-center">
<p>Shall be vertical and horizontal center.</p>
</main>
</div>
</div>
<footer class="flex-none text-center m-2 w-full">
<hr class="mx-auto mb-2 sm:w-56 w-36 h-0.5 bg-gray-100 rounded border-0 shadow-2xl" />
<div class="flex sm:flex-row flex-col sm:gap-4 gap-1 justify-center text-sm font-light">
<p>Footer at bottom
<p>
</div>
</footer>
</div>
Hello I'm trying to make responsive websites through tailwind CSS but when I'm dragging the page to small devices the contents are not aligning with the main walls. This is my code-
<div class="navbar flex justify-between items-center p-4">
<div class="hamburger inline-block cursor-pointer md:hidden">
<div class="line h-0.5 w-6 my-1 bg-black"></div>
<div class="line h-0.5 w-6 my-1 bg-black"></div>
<div class="line h-0.5 w-6 my-1 bg-black"></div>
</div>
<div class="logo text-center flex ">
<div>Restaurant</div>
<div
class="nav-links absolute w-fit md:static md:w-auto inset-0 md:flex md:mx-6 md:space-x-6 -translate-x-96 md:translate-x-0">
<div class="links"><a class="link" href="">Services</a></div>
<div class="links"><a class="link" href="">Support</a></div>
<div class="links"><a class="link" href="">Premium</a></div>
</div>
</div>
<div class="link cart text-center md:order-1">Cart</div>
</div>
<div class="slider flex flex-col-reverse justify-around md:flex-row bg-[#ecf0f1]">
<div class="left flex flex-col justify-center items-center md:items-baseline py-12">
<h1 class="text-2xl font-medium md:text-4xl mx-5 text-center">Food on the go</h1>
<p class="text-center md:text-left md:w-3/4 mx-5 my-2">Explore your favourite food and restaurants and
get them delivered at your doorstep.</p>
<button class="bg-black text-white px-5 py-2 my-2 font-bold mx-5 ">Browse</button>
</div>
<div class="right">
<img class="md:w-[50rem]"
src="https://images.pexels.com/photos/1410236/pexels-photo-1410236.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="">
</div>
</div>
I want to align the text under the image here is the screenshot of what I am doing.
Help me out here I want the code to be in tailwind css.
Do you mean like this?
<script src="https://cdn.tailwindcss.com"></script>
<div class=" p-8 bg-gray-100">
<div class="w-96 flex justify-start space-x-3 bg-gray-200 h-48 rounded-md p-8">
<div class="space-y-4 text-center">
<div class="w-16 h-16 bg-teal-700 rounded-full"></div>
<h1 class=" px-2 py-0.5 bg-gray-50 border-2 border-gray-300 ">First Name</h1>
</div>
<div class="space-y-4 text-center">
<div class="w-16 h-16 bg-teal-700 rounded-full"></div>
<h1 class=" px-2 py-0.5 bg-gray-50 border-2 border-gray-300 ">SecondName</h1>
</div>
</div>
</div>
You just need to do this. It works for me.
<div class="flex p-10 ">
<div class="mx-5">
<div class="w-20 h-20 ">
<img src="https://comps.gograph.com/penguin-emotional-head-vector-illustration-of-cute-arctic-bird-in-sunglasses-shows-emotion-cool-emoji-smiley-icon-print-chat-communication-penguin-in-flat-cartoon-style-on-blue-background_gg103004116.jpg" className="rounded-full"/>
</div>
<p class="mt-3 p-1 border-2 border-teal-200 ">Zain UI Adideen</p>
</div>
<div class="mx-5">
<div class="w-20 h-20">
<img src="https://comps.gograph.com/penguin-emotional-head-vector-illustration-of-cute-arctic-bird-in-sunglasses-shows-emotion-cool-emoji-smiley-icon-print-chat-communication-penguin-in-flat-cartoon-style-on-blue-background_gg103004116.jpg" className="rounded-full"/>
</div>
<p class="mt-3 p-1 border-2 border-teal-200 ">Akira Ito</p>
</div>
</div>
How can I make the second column use the minimum amount of space needed?
https://play.tailwindcss.com/tYdbqCSfoh?size=540x720
I have this:
But I want this instead:
<div class="min-h-screen bg-gray-50 py-6 flex flex-col justify-center relative overflow-hidden sm:py-12">
<div class="relative bg-gray-600">
<div class="max-w-full m-2">
<div class="grid gap-2 grid-flow-col bg-blue-300">
<div class="bg-green-200">sdf</div>
<div class="bg-red-200">sdf</div>
</div>
</div>
</div>
</div>
Just add grid-cols-1
<script src="https://cdn.tailwindcss.com"></script>
<div class="min-h-screen bg-gray-50 py-6 flex flex-col justify-center relative overflow-hidden sm:py-12">
<div class="relative bg-gray-600">
<div class="max-w-full m-2">
<div class="grid grid-cols-1 gap-2 grid-flow-col bg-blue-300">
<div class="bg-green-200">sdf</div>
<div class="bg-red-200">sdf</div>
</div>
</div>
</div>
</div>
I'm having trouble getting the right, "Scroll independently", div, to scroll independently of its sibling div to its left. I would like to be able to do this without changing anything outside of the <!-- CONTENT START --> <!-- CONTENT END --> comments. It seems to be close, but I'm stuck. The "Scroll" and "Scroll independently" div's always scroll together. I'm running this in https://play.tailwindcss.com/
Any help would be greatly appreciated.
<div class="flex bg-gray-100 justify-center">
<div class="flex flex-col w-full max-w-5xl pb-7">
<nav class="sticky top-0 flex items-center justify-between bg-gray-700 text-white h-16 z-40 p-2">
<div class="flex w-1/3">
{Left}
</div>
<div class="flex justify-center w-1/3">
{Middle}
</div>
<div class="flex justify-end items-center w-1/3 gap-2">
{Right}
</div>
</nav>
<!-- CONTENT START -->
<div class="flex">
<div class="w-2/3">
<div class="sticky top-16 w-full h-20 mb-2 bg-green-500">
Don't scroll
</div>
<div class="w-full h-96 mb-2 bg-red-500">
Scroll
</div>
</div>
<div class="w-1/3 mb-2 h-[1000px] bg-pink-400">
Scroll independently
</div>
</div>
<!-- CONTENT END -->
<footer class="fixed inset-x-0 bottom-0 z-50 bg-gray-700 h-7">
<div class="flex items-center justify-end px-8 pt-1">
<div class="text-sm text-white">{versionStr}</div>
</div>
</footer>
</div>
</div>
This cleaned it up nicely:
https://play.tailwindcss.com/Dbd5vnExhk
<div class="flex bg-gray-100 justify-center">
<div class="flex flex-col w-full max-w-5xl pb-7">
<nav class="sticky top-0 flex items-center justify-between bg-gray-700 text-white h-16 z-40 p-2">
<div class="flex w-1/3">
{Left}
</div>
<div class="flex justify-center w-1/3">
{Middle}
</div>
<div class="flex justify-end items-center w-1/3 gap-2">
{Right}
</div>
</nav>
<!-- CONTENT START -->
<div class="flex">
<div class="w-2/3">
<div class="sticky top-16 w-full h-20 bg-green-500">
Don't scroll
</div>
<div class="w-full h-[2000px] bg-gradient-to-b from-red-300 to-red-800">
Scroll
</div>
</div>
<div class="w-1/3 h-[calc(100vh-5.75rem)] sticky top-16 overflow-y-scroll overscroll-contain bg-pink-400">
<div class="h-[1000px]">
Scroll independently
</div>
</div>
</div>
<!-- CONTENT END -->
<footer class="fixed inset-x-0 bottom-0 z-50 bg-gray-700 h-7">
<div class="flex items-center justify-end px-8 pt-1">
<div class="text-sm text-white">{versionStr}</div>
</div>
</footer>
</div>
</div>