I am using Flex in tailwind in one my main div container to align the items inside of it horizontal
but somehow the items are of different sizes in the row the image link is below any fixes for it?
i have tried using height utility class but it just messes up the entire page.
[1]: https://i.stack.imgur.com/Yjs51.jpg
HOME
ORDERS
MENU CARD
FAQs
ABOUT
Butter Chicken
If you haven't tried butter chicken, you don't know what you'r missing.
</div>
</div>
</a>
<a href="butterchicken.html">
<div class="max-w-sm rounded overflow-hidden shadow-lg justify-center">
<img class= "w-full" src="images/download (1).jpg" alt="malai-chicken">
<div class="px-6 py-8">
<div class="font-extrabold text-xl pb-3">Malai Chicken</div>
<div>
<p class=" font-serif text-base mb-3">Clean as white and appetizing.</p>
</div>
</div>
</div>
</a>
</a>
<a href="butterchicken.html">
<div class="max-w-sm rounded overflow-hidden shadow-lg justify-center">
<img class= "w-full" src="images/download (2).jpg" alt="Shahi Paneer">
<div class="px-6 py-8">
<div class="font-extrabold text-xl pb-3">Shahi Paneer</div>
<div>
<p class=" font-serif text-base mb-3">First Pick of Royales.</p>
</div>
</div>
</div>
</a>
</div>
Related
In short, my problem is this:
I'm using TailWind on Laravel, I can't get the text inside the border to fit the whole div he's in, and it's weirdly centered this way where the amount of characters per line is limited
I tried many approaches like changing and trying different values of padding and margin but I was unsuccessful, it only makes the div bigger but the text is still awfully centered and limited.
the code portion is as follows:
<div class="mx-4">
<x-card class="p-10">
<div
class="flex flex-col items-center justify-center text-center"
>
<img
class="w-48 mr-6 mb-6"
src="{{$album->logo? asset('storage/'.$album->logo) : asset('/images/noalbum.png')}}"
alt=""
/>
<h3 class="text-2xl mb-2">{{$album->title}}</h3>
<div class="text-xl font-bold mb-4">{{$album->artist}}</div>
<x-insidetags :tagscsv="$album->tags"/>
<div class=" w-full mb-6 mt-5">
<h3 class="text-3xl font-bold">
About the album
</h3>
</div>
<div>
<div class="flex">
<div class="px-20 text-lg border border-black text-left">
<h3 class="font-bold">Track List :</h3>
#foreach($tracks as $track)
<p>- {{$track}}</p>
#endforeach
</div>
<div class="text-lg space-y-6 ml-10">
<div class="text-left py-10">
{{$album->description}}
</div>
<a
href="{{$album->website}}"
target="_blank"
class=" bg-black text-laravel mt-16 py-2 px-10 rounded-xl hover:opacity-80"
><i class="fa-solid fa-globe"></i> Visit RateYourMusic page</a
>
</div>
</div>
</div>
</div>
For refrence I'm trying to create something like this, but only with the name of the tracks for the moment
I figured it out, added flex 1 1 0% and flex 4 1 0% to the two divs
<div class=" text-lg shadow-xl text-left flex-1 h-fit p-5">
<h3 class="font-bold">Track List :</h3>
#foreach($tracks as $track)
<p>- {{$track}}</p>
#endforeach
</div>
<div class="text-lg ml-10 flex-[4_1_0%]">
<div class="text-left py-10">
{{$album->description}}
</div>
<a
href="{{$album->website}}"
target="_blank"
class=" bg-black text-laravel mt-16 py-2 px-10 rounded-xl hover:opacity-80"
><i class="fa-solid fa-globe"></i> Visit RateYourMusic page</a
>
</div>
<div class="w-auto h-30 m-5 overflow-hidden flex justify-center">
<div>
<img class="object-fit" src="https://fs.easybanners.com/Templates/795/TemplateIcon/795.png" alt="" style="height: 50vh;">
<button class="bg-indigo-500 rounded absolute transform -translate-y-32 translate-x- px-12" style="transform:translateX(10px);"> Contact Us </button>
</div>
</div>
I'm currently using TailWindCSS.
I'm trying to make like a banner for my demo pet shop website.
The problem is that the button gets transported down when I added a style attribute in the button about translate. The button is absolute. Could somebody explain why does this happen in tailwind?
This is what I made so far:
<div class="w-auto h-30 m-5 overflow-hidden flex justify-center">
<div class="">
<img class="object-fit" src="images/banner/PetShopServicesBanner.png" alt="" style="height: 50vh;">
<div class="float-right transform -translate-y-14 -translate-x-60">
<button class="hidden md:block md:w-52 py-2 bg-orange-500 text-gray-900 rounded absolute">
<p> Make a pet groom schedule </p>
</button>
</div>
</div>
</div>
I am trying to position icon to the left side of a Link and have the text centered at the same time.
<div className="max-w-screen-2xl mx-auto sm:px-6 lg:px-8">
<Link
href="#"
className="px-6 py-3 mt-2 flex justify-center text-center"
>
<DocumentTextIcon
className="ml-1 mt-1 -mr-1 h-10 w-10"
aria-hidden="true"
/>
<p>
Some random text </p>
</Link>
</div>
With this the icon is in the middle with the text. I can push to the right with margin left but then it is not dynamic. Any idea how I can push the icon to the left and it remains dynamic?
Try this way:
<div class="my-10 flex items-center justify-center bg-gray-100 w-40">
<div class="flex-1">
<span class="mr-auto">icon</span>
</div>
<p>text</p>
<div class="flex-1"></div>
</div>
<div class="my-10 flex items-center justify-center bg-gray-100 w-80">
<div class="flex-1">
<span class="mr-auto">icon</span>
</div>
<p>with long text</p>
<div class="flex-1"></div>
</div>
Demo
So i have been working on a project. But Clicking on Footer link hides the title portion of the id like the 2nd image . is there any way to show it like the 3rd pic . Tried adding padding top to the id element still not working. Showing this
Want to show like this
My Footer Code
<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<!-- Body -->
<div class="w-full px-4 md:w-1/3">
<h2 class="mb-3 text-2xl tracking-widest title-font text-textC font-futuraB">
TOP SERVICES</h2>
<ul class="mb-10 list-none font-futuraL">
<li class="py-0.5">
Brand strategy
</li>
<li class="py-0.5">
Identity Design
</li>
<li class="py-0.5">
Marketing & Development
</li>
<li class="py-0.5">
<a rel="noopener noreferrer" href="http://ignition.brandheft.com/" class="text-textAltC hover:text-accentC">Printing Services</a>
</li>
</ul>
</div>
Div Element having the issue
<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<!-- Body -->
<div class="flex flex-wrap justify-center mx-auto lg:w-4/5 service_container_1" id="strategy">
<div class="order-first object-cover object-center rounded lg:w-1/2">
<img class="w-full h-72 lg:h-auto service_img_1" src="https://via.placeholder.com/300.jpg">
</div>
<div class="w-full my-auto mb-6 text-center lg:w-1/2 lg:pr-10 lg:py-6 lg:mb-0 font-futuraM lg:text-left">
<h1 class="pt-12 mb-4 text-5xl font-medium text-textC">Brand Strategy</h1>
<p class="mb-4 text-base leading-relaxed lg:text-lg text-textAltC first-letter:text-accentC first-letter:text-xl lg:first-letter:text-2xl font-futuraL">Whether you want to be remembered by your customers, connect with your audience, or increase the prices of your products by showing them the value, you need to differentiate yourself from your competitors. Differentiating doesn't always mean providing
a totally different product or service. Differentiating means adding a little something extra that'll make a huge impact. That naturally comes from your vision but you need to mine it using a proper brand strategy. A brand strategy encompasses your
company's mission, promises to your customers, and a plan to communicate the same to your audience. Here's how we can help you draft a successful brand strategy.</p>
<div class="space-y-2">
<div class="flex flex-col justify-between space-y-2 lg:space-y-0 lg:flex-row">
<span class="text-accentC">Brand purpose</span>
<span class="text-accentC">Target audience</span>
</div>
<div class="flex flex-col justify-between space-y-2 lg:space-y-0 lg:flex-row">
<span class="text-accentC">Brand attributes</span>
<span class="text-accentC">Brand book</span>
</div>
<div class="flex flex-col justify-between space-y-2 lg:space-y-0 lg:flex-row">
<span class="text-accentC">Brand mission statement</span>
<span class="text-accentC">Brand voice</span>
</div>
<div class="flex flex-col justify-between space-y-2 lg:space-y-0 lg:flex-row">
<span class="text-accentC">Brand personality</span>
<span class="text-accentC">Brand kit</span>
</div>
</div>
<div class="flex mt-10">
Get a Quote
</div>
</div>
</div>
LIVE WEBSITE
I have a section with the following contents:
<section class="flex flex-wrap -mx-2">
<Card
v-for="(course, index) in courses"
:key="index"
:title="course.title"
:professor="course.professor"
:price="course.price"
:excerpt="course.excerpt"
:image="course.image"
:category="course.category"
/>
</section>
A Card looks like this:
<article class="bg-red mt-5 px-2 w-full md:w-1/2 lg:w-1/3 xl:w-1/3 shadow-md rounded bg-white">
<nuxt-link to="/courses/example-course">
<img :src="`/images/${image}`" :alt="title" class="rounded-t w-full">
</nuxt-link>
<div class="p-4">
<header class="flex justify-between">
<section>
<h3 class="text-gray-700">
<nuxt-link to="/courses/example-course" class="hover:text-gray-600" v-text="title"></nuxt-link>
</h3>
<p class="text-gray-600 mt-1" v-text="professor"></p>
</section>
<div v-if="price">
<span class="px-2 py-1 bg-green-200 text-green-500 font-bold rounded">${{ price }}</span>
</div>
</header>
<article class="text-gray-700 mt-2" v-text="excerpt"></article>
</div>
<footer class="border-t border-gray-300 uppercase p-5 flex justify-between">
<span class="text-gray-600 text-xs font-bold self-center" v-text="category"></span>
<a href="#" class="text-gray-600 hover:text-blue-600">
<i v-if="price" class="fa fa-user"></i>
</a>
</footer>
</article>
And the outcome of all this looks like this:
As you can see, the cards are touching each other, despite me following what the Tailwind's docs say on grid spacing. I have tried adding ml-2 on the <article> tags, but that just results in wrapping the element prematurely and leaving out too much space.
What am I doing wrong here and how to add a gap between the cards? Thanks!
The "problem" with margin is that it lives on the outside of the box(model) of your element, e.g. it affects the total width of your card. For example on large screens you want them to be 33.33% wide, but if you add margin on the left/right, the card will have a width of 33.33% + margin which makes the flexbox container wrap after two items because otherwise the total width would be more than 100%. You can solve this by a) setting things to box-sizing: border-box (doesn't help with margin tough!) and b) use padding instead of margin to create the gaps, this usually requires some kind of wrapper around your content that does nothing else than dealing with spacing and sizing, something like this:
<article class="mt-5 px-2 w-full md:w-1/2 lg:w-1/3 xl:w-1/3">
<div class="card bg-red shadow-md rounded bg-white">
<nuxt-link to="/courses/example-course">
<img :src="`/images/${image}`" :alt="title" class="rounded-t w-full">
</nuxt-link>
<div class="p-4">
<header class="flex justify-between">
<section>
<h3 class="text-gray-700">
<nuxt-link to="/courses/example-course" class="hover:text-gray-600" v-text="title"></nuxt-link>
</h3>
<p class="text-gray-600 mt-1" v-text="professor"></p>
</section>
<div v-if="price">
<span class="px-2 py-1 bg-green-200 text-green-500 font-bold rounded">${{ price }}</span>
</div>
</header>
<article class="text-gray-700 mt-2" v-text="excerpt"></article>
</div>
<footer class="border-t border-gray-300 uppercase p-5 flex justify-between">
<span class="text-gray-600 text-xs font-bold self-center" v-text="category"></span>
<a href="#" class="text-gray-600 hover:text-blue-600">
<i v-if="price" class="fa fa-user"></i>
</a>
</footer>
</div>
</article>
I know it is kind of annoying to clutter up the markup like that, but its usually worth it =).
EDIT: It is actually as the docs say
Add a negative horizontal margin like -mx-2 to your column container and an equal horizontal padding like px-2 to each column to add gutters.
your issue is with the box-shadow that then doesn't let you create a visual gap, so technically you need the wrapper because of your box-shadow!