I have problem with my flex div in my portfolio. I have 3 services that I want to feature. They all have a svg image and some text underneath. I tried to give them all a flex: 1 property, but they still don't share the space evenly.
Here is the code:
<div class="flex flex-row">
<div class="px-24 pt-8 flex flex-1 flex-col justify-center items-center text-center">
<img src="/static/media/design.0e806bbe.svg">
<span class="font-montserrat font-bold text-4xl">Design</span>
</div>
<div class="px-24 pt-8 flex flex-1 flex-col justify-center items-center text-center">
<img src="/static/media/code.4871712c.svg">
<span class="font-montserrat font-bold text-4xl">Programmation</span>
</div>
<div class="px-24 pt-8 flex flex-1 flex-col justify-center items-center text-center">
<img src="/static/media/hosting.af9efcf1.svg">
<span class="font-montserrat font-bold text-4xl">Hébergement</span>
</div>
</div>
This is what I get:
PS: I am using TailwindCSS.
Related
I want to center the text within the division so that the two text columns aren't right next to each other.
Original:
So that it's like this:
My code:
<div class="px-80 py-4 grid grid-cols-2 divide-x-4">
<div className="w/2 flex flex-col">
<div class="font-bold text-6xl text-center">+9.7%</div>
<p class="text-gray-700 text-4xl text-center">
Since Last Quarter
</p>
</div>
<div className="w/2 flex flex-col justify-center w-full h-full items-center">
<div class="font-bold text-6xl text-center">-11.3%</div>
<p class="text-gray-700 text-4xl text-center">YTD</p>
</div>
</div>
</div>```
Try removing the grid and remove the px-80 and replace it with flex and the following code:
<div class="flex p-10 divide-x-2">
<div class=" flex flex-col flex-1">
<div class="font-bold text-6xl text-center font-[roboto]">+9.7%</div>
<p class="text-gray-700 mt-2 text-2xl text-center font-serif">
Since Last Quarter
</p>
</div>
<div class=" flex flex-col justify-center flex-1 items-center">
<div class="font-bold text-6xl text-center font-[roboto]">-11.3%</div>
<p class="text-gray-700 mt-2 text-2xl text-center font-serif">YTD</p>
</div>
</div>
</div>
</div>
Output:
Tailwind-play
I've tried isolating an issue for a few hours to no avail. I think an image is worth more than a few words so let's start with that.
And the code.
<section id="about-me" class="flex bg-neutral-300 text-neutral-900">
<div class="container mx-auto flex flex-col space-y-5 md:flex-row md:space-x-5 p-5 md:p-0 md:pt-5 md:pb-5">
<div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
<div class="flex flex-col">
<p>test</p>
</div>
</div>
<div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
<div class="flex flex-col">
<p>test</p>
</div>
</div>
<div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
<div class="flex flex-col">
<p>test</p>
</div>
</div>
</div>
</section>
As we can see, the first div inside the container has a weird position. I've tried removing a lot of classes, including padding and margin, but the first element stays in this position no matter what.
I really don't see what is my issue, so I kind of need extra pairs of eyes right now. Thanks.
Remove in in the container div this class space-y-5. And it would work like expected.
<section id="about-me" class="flex bg-neutral-300 text-neutral-900">
<div class="container mx-auto flex flex-col md:flex-row md:space-x-5 p-5 md:p-0 md:pt-5 md:pb-5">
<div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
<div class="flex flex-col">
<p>test</p>
</div>
</div>
<div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
<div class="flex flex-col">
<p>test</p>
</div>
</div>
<div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
<div class="flex flex-col">
<p>test</p>
</div>
</div>
</div>
</section>
I have a main title, logo, and subtitle and want to put the subtitle at the center whatever the logo's width.
With the current code sub title's position changes according to the logo's width and does not align with to the main header
<div class="flex justify-between items-center p-4 pt-10">
<div class="w-40"></div>
<p mode="" class="pb-8 w-72 flex justify-center text-white">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</div>
<div class="w-screen bg-red-500 bg-opacity-50 mb-5 py-5 text-white flex justify-between">
<img src="{{ 'storage/'.$logo}}" class="h-14 pl-24" alt="">
<h1 class="block text-3xl font-semibold text-center my-auto">xxxxx</h1>
<div class="w-72"></div>
</div>
How to deal with it?
Easiest way to solve this issue is using position: absolute property on image tag. Use position property and remove extra unwanted div's. Try following code, I hope it will solve your issue.
<div class="flex justify-center bg-red-200 items-center p-4 pt-10">
<p mode="" class="pb-8 text-white">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</div>
<div class="w-screen bg-red-500 bg-opacity-50 mb-5 py-5 text-white flex justify-center relative">
<img src="https://placehold.it/150x150?text=logo" alt="" class="absolute left-0 top-0 h-14 pl-24 pt-4">
<h1 class="block text-3xl font-semibold text-center my-auto">xxxxx</h1>
</div>
You are trying to adjust the logo and subtitle with flex justifyContent so the logo width changes will cause movement of your subtitle.
There are many options in css for fixing this, one of them is to use absolute position for your img element:
<div class="w-screen bg-red-500 bg-opacity-50 mb-5 py-5 text-white flex justify-between">
<img src="{{ 'storage/'.$logo}}" class="absolute left-0 top-0 h-14 pl-24 pt-4" alt="">
<h1 class="block text-3xl font-semibold text-center my-auto">
Subtitle
</h1>
</div>
<div class="grid grid-cols-5 gap-4">
<div class="overflow-hidden border hover:rounded-lg hover:shadow-lg justify-evenly">
<div class="flex px-3 pt-1 justify-end">
<a class="underline italic" href="desc.html" title="Description">More</a>
</div>
<a class="cursor-pointer" href="www.www.com">
<img src="img/img.JPG" />
</a>
<div class="flex w-full justify-evenly mt-1 mb-4">
<a href="www.www.com class="bg-green-700 hover:bg-green-800 text-white font-bold py-1 px-4 rounded">
Button
</a>
</div>
</div>
<div class="overflow-hidden border hover:rounded-lg hover:shadow-lg justify-evenly">
</div>
...
</div>
I have grid with multiple grid cells. Each cell contains image. Under image there is a button. Currently button is placed just under the image. However, heights of images are different. So those buttons are not aligned.
I wonder how to put these buttons at the bottom of each cell??
I tried to add align-bottom on button wrapper, but it doesn't help.
Just need to play around with h-# flex flex-col justify-*. See a working demo.
<div class="grid grid-cols-3">
<div class="col-span-1 h-96 flex flex-col justify-between">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="h-full bg-cover bg-center" />
<button class="w-24 px-4 py-2 bg-gray-200 rounded-lg">Button</button>
</div>
<div class="col-span-1 h-96 flex flex-col justify-between">
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" class="h-3/5 bg-cover bg-center" />
<button class="w-24 px-4 py-2 bg-gray-200 rounded-lg">Button</button>
</div>
<div class="col-span-1 h-96 flex flex-col justify-between">
<img src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png" class="h-3/4 bg-cover bg-center" />
<button class="w-24 px-4 py-2 bg-gray-200 rounded-lg">Button</button>
</div>
</div>
I see the following changes:
The card div should be a flex column, with the classes flex and flex-col and justify-between. This one each child element will be vertically positioned so there is the same space between them
Wrap the Img and the more link in a div, this way the space between the img and the more won't be that large
I am currently working with tailwind to create a log in form.
The HTML looks like so:
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<title>Test</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>
</head>
<body style="height: 100%; width: 100%;">
<div class="w-full h-full flex flex-col p-5 md:flex-row md:space-x-2">
<div class="w-full h-1/4 flex justify-center items-center md:w-1/2 md:h-full">
</div>
<div class="w-full h-3/4 p-2 md:w-1/2 md:h-full">
<div class="h-10 flex justify-around items-center mb-1 space-x-2">
<a class="h-full w-full">
<div class="flex h-full w-full justify-center items-center text-center text-lg border rounded-lg border-red-900">
<span>Log in</span>
</div>
</a>
<a class="h-full w-full">
<div class="flex h-full w-full justify-center items-center text-center text-lg border rounded-lg border-red-900">
<span class="">Sign up</span>
</div>
</a>
</div>
<div style="height: calc(100% - 2.5rem) !important" class="p-2 border rounded-lg border-red-900 shadow-2xl">
<div class="w-full h-full flex relative">
<form class="w-full h-full">
<div style="height: calc(100% - 2.5rem) !important" class="w-full h-full flex flex-col justify-center overflow-auto">
<div class="w-3/4 my-3 mx-auto flex flex-col justify-center">
<label class="w-full">
<span class="font-mono ml-3">Email</span>
<input class="w-full px-3 border rounded-lg border-red-700 h-8 focus:outline-none focus:ring-1 focus:ring-red-700 focus:z-10" type="text"
placeholder="user#mail.com" required autofocus>
</label>
</div>
<div class="w-3/4 my-3 mx-auto flex flex-col justify-center">
<label class="w-full">
<span class="font-mono ml-3">Password</span>
<input class="w-full px-3 border rounded-lg border-red-700 h-8 focus:outline-none focus:ring-1 focus:ring-red-700 focus:z-10" type="password"
placeholder="********" required>
</label>
</div>
<div class="w-3/4 mx-auto text-right text-red-700">
<a>Forgot password?</a>
</div>
</div>
<div class="text-red-700 m-auto h-10 w-3/4 absolute bottom-0 inset-x-0 text-center border rounded-lg">
<button class="font-mono h-full w-full focus:bg-red-700 focus:text-white focus:outline-none focus:ring-0 border rounded-lg border-red-700 hover:bg-red-700 hover:text-white"
type="submit">Log in</button> <!-- [disabled]="!loginForm.valid" -->
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
The problem
As you can see, in the parent div, it contains the class overflow-auto. The issue is that when the overflow is activated, part of the first child is not shown for some reason. When removing the justify-center (also in the parent div) this issue is no longer a problem, however I want the content to be vertically centered.
Please see the following image to get a graphical idea. As the image shows, the scrollbar is at its top limit, however the first child is only partly displayed.