I got a simple code as such :
<div class="container">
<div class="w-2/3 h-32 bg-gray-900 text-yellow-500 relative">
<span class="absolute top-96 left-full">hello</span>
</div>
</div>
However the hello is way outside the div I intend to use it in.
How can I put hello inside my 2nd div?
How can I put hello inside my 2nd div?
absolute top-96 left-full positions the <span>hello</span> 24rem below the top and on the right edge of the <div class="w-2/3 h-32 bg-gray-900 text-yellow-500 relative">...</div>. Remove absolute top-96 left-full from the span and "hello" will appear within the bounds of the bg-gray-900 div.
Related
I am using tailwind css, the collapse class is set 'hidden' and is toggled to 'block' on hover , but it is still not working, have seen on web and they show the same approach. I understand one way is to remove hidden class on hover but this too shall work , idk please help .
<div className='text-white text-xl font-bold relative right-8 p-2 hover:text-slate-300 cursor-pointer'>Menu
<div className='bg-white text-black z-30 w-44 right-14 hidden absolute hover:absolute'>
<div className=' block'>
<div>Add Project</div>
<div>My Projects</div>
<div>Logout</div>
</div>
</div>
</div>
I have a title with a fixed width, and I need to set a logo after the last word in the title.
When the title is too long, it takes 2 lines.
Example :
My
Title (logo should go here)
Here is a codepen with tailwind : https://codepen.io/jbrazillier/pen/OJZWYEb
I can only set it below the title, or on the right of the first word.
Since you have fixed size for your h2 you should wrap your image and title in a relative div and your logo should be absolute then use position left-full
by the way you should improve your markup i added the border to show you what i mean
<script src="https://cdn.tailwindcss.com"></script>
<h2 class="w-[40px] flex text-3xl font-bold border">
<div class="relative">My title
<img class="w-8 h-8 absolute bottom-0 left-full" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Red-circle.svg/1200px-Red-circle.svg.png" alt="" />
</div>
</h2>
i have problem with filling empty space, if parent div using display flex, and children have translate-x class, here some example code
<div class="flex h-screen w-screen">
<div class="w-1/3 -translate-x-10 bg-red-200"></div>
<div class="w-full bg-red-400"></div>
</div>
it show like this
how do i fill the empty space with red if i change the translate-x value
First thing that comes to mind is you could try adding a background color to the parent div like assuming you want the darker red. There are probably other methods but if this one works for your use case it's pretty simple.
<div class="flex h-screen w-screen bg-red-400">
<div class="w-1/3 -translate-x-10 bg-red-200"></div>
<div class="w-full bg-red-400"></div>
</div>
I am struggling to imagine the best way to accomplish a layout I am trying to achieve which includes a static sized oval that is cropped for smaller screens and which contains text inside it that will respond based on the breakpoint.
The design is like this:
So far, I'm here:
I'm trying to achieve this by creating the Oval outside my container div then putting on negative margin on the text to give it the appearance it is inside the oval. I feel like this isn't the right approach.
Currently set up (using Tailwind):
<section id="reading">
<div class="mt-12 border border-black rounded-[50%] overflow-hidden w-[686px] h-72"></div>
<div class="flex flex-col mx-auto md:container">
<div class="self-center justify-center px-8 text-center uppercase -my-80 py-28 text-ts3 font-title-preset">Text Headline Goes Here</div>
</div>
</section>
In my head, for the oval, I would just do margin:auto; overflow:hidden, and width:100% on the div, but that isn't working.
Any pointers on how you would approach this from a better practice perspective?
Thanks!
The approach you're taking separates the oval from the content within. A better way would be to keep them together by wrapping them both in a relatively positioned div and making the oval absolutely positioned to the top and center (then using a transform to center again which is a common pattern) and adding overflow-hidden to the relatively positioned element.
Not sure what your text-ts3 class is meant to do since you did not share your config. But this example uses a few breakpoints with text size classes defined for each and some negative top margin on the text to make things look more vertically centered. Here is the example running on Tailwind Play https://play.tailwindcss.com/3zWymGzXPn
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<section id="reading" class="border border-transparent pt-12">
<div class="overflow-hidden relative mx-auto md:container h-72">
<div class="border border-black rounded-[50%] w-[686px] h-full absolute top-0 left-1/2 -translate-x-1/2"></div>
<div class="h-full flex items-center justify-center max-w-[686px] mx-auto">
<div class="text-center uppercase -mt-4 sm:-mt-6 md:-mt-8 text-5xl sm:text-6xl md:text-7xl max-w-xs sm:max-w-sm">Text Headline Goes Here</div>
</div>
</div>
</section>
You can set the width of the oval to 120% (or a fixed with per breakpoint) and the shrink to 0, so it does not shrink.
<section id="reading">
<div class="flex h-screen w-full justify-center overflow-hidden bg-yellow-100">
<div class="mt-12 flex h-56 w-[120%] shrink-0 items-center justify-center rounded-[50%] border border-slate-300">
<div class="font-semibold">text goes here.</div>
</div>
</div>
</section>
See example in tailwind play.
I'm using TailwindCSS -a utility class framework- to style my elements. Altough this is more a generic CSS question.
I can't manage to position the box so this gets the remaining space without overflowing it. This is my actual state:
<div class="flex flex-col h-screen mx-8 bg-white rounded p-4 mb-8">
<!-- SUBTITLE -->
<div>
<h2 class="text-lg font-bold text-gray-700 pb-4">Subtitle</h2>
</div>
<div class="relative self-auto mb-8">
<!-- ELEMENTS -->
<a href="#">
<img class="absolute z-10" style="top: 131px; left: 235px;"
src="{{ asset('some.svg') }}">
</a>
</div>
</div>
Output (omitting some of the inside elements):
As you can see, the scrollbar shows because the div is too big. In order to see the bothom of the box I have to scrolldown:
This is my desired output:
Thanks in advance.
Fiddle
Link.
The class .h-screen is 100vh. .mb-8 has an margin-bottom:2rem. So the height is 100vh + 2rem. You can use [calc][1] to subtract the margin from the height.
.h-screen{
height:calc(100vh - 2rem)!important;
}
https://jsfiddle.net/c28145au/
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
This is the solution I found: w-[calc(100%_-_10px)]
you are using class h-screen which has height: 100vh; remove that class from the div.