this is my first post here on Stack Overflow, long time lurker - I have a spacing problem, how can I prevent Title from intersecting with the number? When the column are forced closer together they overlap. I am using Tailwind CSS. Here is my code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col w-full pt-28 px-56">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-12 lg:gap-24 xl:gap-36 pt-5">
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">01</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">02</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">03</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">04</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">09</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
</div>
</div>CodePudding user response：
In the future you should post your CSS. The texts have just a little bit of overlap but adding some margin forces them to be apart. This makes your title overflow to the next row, because it can fit the texts, but not the texts and 2 pixels of margin. That can be fixed by giving the div more room to work with.
.flex-col {
margin-right: 2px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col w-full pt-28 px-56">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-12 lg:gap-24 xl:gap-36 pt-5">
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">01</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">02</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">03</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">04</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">09</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
</div>
</div>CodePudding user response：
Adding margin to the columns makes the text overflow to the next row as Jesper's answer. If the width of the columns need not be fixed, one way to resolve this issue would be to change the width of the second column from w-11/12 to say w-10/12 and add a mr-2 to the first column
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12 mr-2">
<h4 class="text-xl font-bold">01</h4>
</div>
<div class="flex-col w-10/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
Here is how it looks when you add the above changes:
