As the title says, there is whitespace between header and div. Image can be seen below.
Here is a codepen link that recreates the issue: https://codepen.io/pongbao/pen/MWGXLEm
Thanks a lot to those who can help!
<div id="td-div" class="lg:w-1/6 border-2 border-dark-cyan-600 mr-1 mt-1 relative">
<form id="td-form">
<h2
class="text-sm text-center border-b-2 border-dark-cyan-600 bg-dark-cyan-600 py-1 w-full">
Time
Deposit
</h2>
<ul class="text-xs font-roboto-mono">
<li class="pl-1 pt-1">TENOR: 3 MONTHS</li>
<li class="pl-1">RATE: <span id="td-rate">3.0</span>%</li>
<li class="pl-1 my-auto w-full inline-flex"><label for="time-deposit-amount">AMOUNT:
</label><input id="time-deposit-amount"
class="ml-1 px-1 min-w-0 max-w-full shrink border-b border-slate-400 text-xs text-right"
name="time-deposit-amount" type="number" min="1" step="0.01" placeholder="0.00"
required><span id="max-td-amount"
class="hover:cursor-pointer text-2xs my-auto px-1">MAX</span>
</li>
</ul>
<button id="td-button" type="submit"
class="block mx-auto my-2 py-1 px-1.5 rounded text-xs bg-dark-cyan-300 hover:bg-dark-cyan-400"><a
class="inline-flex">Invest<svg fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-4 h-3 ml-0.5 mt-0.5" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg></a></button>
</form>
</div>
I see this problems in chrome on my screen that has it's dpi set to 125% but not on my other screen where the dpi is set to 100%. I don't seen the problem in firefox at all.
This leads me to think it might be a DPI scaling issue in chrome. Any chance you are using a HiDPI screen?
I'm not sure if there is any good solution for this, but maybe a css on the h2 might work: (maybe not the best solution, but don't know a better one)
position: relative;
top: -1px;
left: -1px;
width: calc(100% + 2px);
Its problem with border-2 which is border-width: 2px; in class list of #td-div. Among others values 2px, 3px, 6px, 7px just leave some space like that . Just change border-2 to border-[2.5px].
Related
I have the following code that creates two <p> tags to store some text:
<p v-if="my_property <= 0" class="text-green-500 text-lg font-bold">{{Math.abs(my_value)}}%</p>
<p v-else class="text-red-500 text-lg font-bold">{{my_value}}%</p>
<div class="inline-block align-bottom bg-yellow-500 align-text-bottom">
<p class="text-gray-500 text-sm ml-1 inline-block align-text-bottom align-bottom">tsa</p>
</div>
I'm trying to have the last <p> tag align bottom as compared to the first. I've tried putting the <p> tag currently in the <div> inside and outside a <div> tag, but I can't seem to get the result right, and it currently looks like this:
I want the "tsa" text to appear here:
What do I need to change about the way I've currently got it?
Note: I've highlighted the <div> in yellow to just show the text is not aligned to the bottom of it.
You can solve your issue by adding a flex-container for all your <p> tags.
<div class="flex items-baseline">
<p v-if="my_property <= 0" class="text-green-500 text-lg font-bold">{{Math.abs(my_value)}}%</p>
<p v-else class="text-red-500 text-lg font-bold">29%</p>
<p class="text-gray-500 text-sm ml-1">tsa</p>
</div>
You can follow the below code for the solution
<script src="https://cdn.tailwindcss.com"></script>
<div v-if="my_property <= 0" class="text-green-500 text-lg font-bold">{{Math.abs(my_value)}}%
<span class="text-gray-500 text-sm ml-1 inline-block align-text-bottom align-bottom">tsa</span>
</div>
<div v-else class="text-red-500 text-lg font-bold">{{my_value}}%
<span class="text-gray-500 text-sm ml-1 inline-block align-text-bottom align-bottom">tsa</span>
</div>
I'm working on this website that is built on React Js and Tailwind. I've made it completely responsive and everything is in working condition however, sometimes when i try to open it in responsive mode on my browser it shows up zoomed in. If i try to exit and enter responsive mode one or two times, it works as intended with no space to move right or left on the webpage. When opening the website on mobile phone however, it shows up zoomed in. It's been two days and i cant get it to work. Phone Display. This is how the site looks like when it's working after entering and exiting responsive mode a couple times. Responsive on Browser. This is how the browser looks like when i try to run it in responsive mode when the bug appears Bad Browser Display
const ComponentCaller = () => { return (
<div className="flex md:min-w-full sm:max-w-screen">
//min-w-[80px] is to create an empty div to leave space for the sidebar
<div className="min-w-[80px] bg-transparent"></div>
<div>
{/*
<div className="bg-one bg-opacity-80 w-screen h-screen -z-50"> */}
<FrontComponent /> {/*
<TestComponent /> */}
<HustleComponent />
<HoverTableComponent />
<AboutUsComponent />
<Contact />
<Footer />
</div>
</div>
) }
This displays all the components
const FrontComponent = () => { return (
<>
<div className="font-body font-extrabold">
<div className="h-full w-full flex flex-col md:flex-row text-lite">
//80 vh height fixed
<div className="flex flex-col justify-center items-center h-[80vh] md:pr-0 sm:pr-6">
<h1 className="font-head text-8xl mr-2 md:pl-12 text-lite leading-tight">
Sample Text
</h1>
<br />
<div className="uppercase text-lite flex flex-col md:flex-row text-lg mt-8 w-max">
<button className="style-1 mt-4 ss:mt-6 rounded-tr-2xl md:mx-4 inline-flex text-base justify-center align-middle w-72 md:w-36 lg:w-48 lg:h-16 h-12">
Get a Quote
<svg
className="fill-lite w-[15px] mx-2 animate-pulse"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z" />
</svg>
</button>
<button className="style-1 mt-4 md:mx-4 rounded-tr-2xl inline-flex text-base justify-center align-middle w-72 md:w-36 lg:w-48 lg:h-16 h-12">
Join our Team
</button>
</div>
</div>
<div className="w-[42rem] md:mr-4 ml-16 lg:max-w-[45%] md:w-3/5 md:py-8 my-12 text-center relative grid justify-items-center items-center">
<img src={business} alt='business' />
</div>
</div>
</div>
</> ) }
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 1 year ago.
I'm using tailwind to create a card with an arrow. I want the arrow always next to the text 10px. But when the text is wrapped, the width of the text is larger than the actual width of the text.
I tried adding width: fit-content but the text will overflow and can't wrap. If I add width: min-content then the text always wraps.
I must use javascript to get the actually width of the text in this case, right?
Here is my code:
<div class="grid grid-cols-3 gap-8 m-20 lg:max-w-[1200px]">
<div class="w-full h-52 overflow-hidden shadow-xl p-8 flex items-center justify-start gap-4">
<div class="min-w-[80px] min-h-[80px] bg-blue-500"></div>
<p class="text-xl font-bold">Software Solutions</p>
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.78125 0.75L6.25 5.5C6.375 5.65625 6.46875 5.84375 6.46875 6C6.46875 6.1875 6.375 6.375 6.25 6.53125L1.78125 11.2812C1.5 11.5938 1.03125 11.5938 0.71875 11.3125C0.40625 11.0312 0.40625 10.5625 0.6875 10.25L4.6875 6L0.6875 1.78125C0.40625 1.46875 0.40625 1 0.71875 0.71875C1.03125 0.4375 1.5 0.4375 1.78125 0.75Z" fill="#333940" />
</svg>
</div>
<div class="w-full h-52 overflow-hidden shadow-xl p-8 flex items-center justify-start gap-4">
<div class="min-w-[80px] min-h-[80px] bg-blue-500"></div>
<p class="text-xl font-bold pr-0 w-[fit-content]">Business process solutions</p>
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.78125 0.75L6.25 5.5C6.375 5.65625 6.46875 5.84375 6.46875 6C6.46875 6.1875 6.375 6.375 6.25 6.53125L1.78125 11.2812C1.5 11.5938 1.03125 11.5938 0.71875 11.3125C0.40625 11.0312 0.40625 10.5625 0.6875 10.25L4.6875 6L0.6875 1.78125C0.40625 1.46875 0.40625 1 0.71875 0.71875C1.03125 0.4375 1.5 0.4375 1.78125 0.75Z" fill="#333940" />
</svg>
</div>
</div>
Edited
I don't think that this is possible with CSS alone.
See this answer for JS fix: https://stackoverflow.com/a/32222395/4536543
Here's my take on it:
// get list of all spans
list = document.querySelectorAll('.content span');
for (var i=0; i<list.length; i++) {
// retrieve width of span and apply it to parent
w = list[i].offsetWidth;
list[i].parentNode.style.width = w+1+"px"; // need to add 1 because sometimes width is not a whole number and Browser sometimes rounds it down which will trigger layout shift
}
<div style="background: green; width: 134px; position: relative">
<div class="content" style="background: yellow; float: left; max-width: 124px;">
<span style="background: grey">
somewhat long text goes here <!-- this is your "Business process solutions" -->
</span>
</div>
<div style="background: red; width: 10px; display: inline">
>
</div> <!-- this is your arrow -->
</div>
I want to make a sticky navbar that has a blur effect like https://headlessui.dev/react/menu (try scrolling to see the blur effect on the nav). It should look like:
Here's what my HTML looks like:
<header class="sticky z-10 top-10">
<nav class="backdrop-filter backdrop-blur flex items-center justify-center h-16 font-semibold text-sm after:absolute after:inset-x-0 after:w-full after:h-12 after:shadow-hr after:z-[-1] mt-12">
<section class="h-full">
<a class="flex items-center justify-center h-full pl-4" href="/"
><svg width="176" height="177" viewBox="0 0 176 177" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current dark:text-white -rotate-6"><path d="M56.576.872h4.352l20.224 70.144L51.712 177H.512L56.576.872zm57.6 144.896H71.424l10.752-39.424h20.48L72.448.872h46.848L175.36 177h-52.224l-8.96-31.232z" fill="currentColor"></path></svg><span class="text-lg sr-only">Home</span></a
>
</section>
<section class="h-full">
<ul class="flex items-center justify-center h-full">
<li class="mx-4"><a class="text-lg font-bold text-gray-700/75 hover:text-gray-900 dark:text-white/50 dark:hover:text-white" href="/essays">Essays</a></li>
<li class="mx-4"><a class="text-lg font-bold text-gray-700/75 hover:text-gray-900 dark:text-white/50 dark:hover:text-white" href="/tutorials">Tutorials</a></li>
<li class="mx-4"><a class="text-lg font-bold text-gray-700/75 hover:text-gray-900 dark:text-white/50 dark:hover:text-white" href="/snippets">Snippets</a></li>
<li class="mx-4"><a class="text-lg font-bold text-gray-700/75 hover:text-gray-900 dark:text-white/50 dark:hover:text-white" href="/tips">Tips</a></li>
<li class="mx-4"><a class="text-lg font-bold text-gray-700/75 hover:text-gray-900 dark:text-white/50 dark:hover:text-white" href="/feed.xml">RSS</a></li>
<li class="mx-4"><a class="text-lg font-bold text-gray-700/75 hover:text-gray-900 dark:text-white/50 dark:hover:text-white" href="/about">About</a></li>
</ul>
</section>
</nav>
</header>
<h1 class="text-5xl font-bold text-center font-serif mt-20">All Essays By Date</h1>
<h2 class="w-3/4 mx-auto mt-4 mb-8 text-lg font-semibold text-center text-gray-700 dark:text-gray-300 sm:w-2/4">Scroll down to browse all of my essays by date and title. Essays are listed in reverse chronological order with my newest essay at the top and my oldest essay at the bottom.</h2>
<main class="prose block mx-auto">
<p>Have you ever visited a website and been completely in awe of the elegance and simplicity of its design? For me, that website is <a target="_blank" rel="noopener noreferrer" href="https://stripe.com/">Stripe</a>. Stripe is a company that allows people and businesses to accept payments online and in mobile apps. That doesn't sound like a company that would have an exquisite website design, but look at how Stripe describes themselves on their about page.</p>
<blockquote>
<p>"We think that building an internet business is a problem rooted in code and design, not finance."</p>
</blockquote>
<p>Rather than making design an afterthought, it's treated as a first-class citizen at Stripe. You can almost feel the hours of work spent iterating over designs and making minor tweaks when viewing the website's pages. In this article, I'm going to break down how Stripe creates these beautiful designs and give some tips and tricks to web designers and developers alike.</p>
<h3 id="the-design">
<span class="icon icon-link"></span>The Design
</h3>
<div style="display: inline-block; max-width: 100%; overflow: hidden; position: relative; box-sizing: border-box; margin: 0px;">
<div style="box-sizing: border-box; display: block; max-width: 100%;"></div>
</div>
<p>Pictured above is the design for Stripe's main landing page. At first glance, here's what really sticks out to me:</p>
<ol>
<li>Crisp typography</li>
<li>Stunning color palette</li>
<li>High-quality images</li>
<li>Bold call-to-action buttons</li>
</ol>
<p>Let's start with the first observation: the font.</p>
<h3 id="typography">
<span class="icon icon-link"></span>Typography
</h3>
<p>Stripe uses a font called <a target="_blank" rel="noopener noreferrer" href="https://www.fontshop.com/families/camphor">Camphor</a>. It's a modern, uncluttered, sans serif font designed by Nick Job in 2010. It <em>really</em> shines here and looks great in a variety of weights.</p>
<div style="display: inline-block; max-width: 100%; overflow: hidden; position: relative; box-sizing: border-box; margin: 0px;">
<div style="box-sizing: border-box; display: block; max-width: 100%;"> </div>
<p>Let's see how we can make our font as crisp and clear as possible. First, we'll define our font family to be Camphor along with some fallback fonts. <strong>Note:</strong> Camphor is not free and should be purchased if you're planning to use it in production. However, I did find a <a target="_blank" rel="noopener noreferrer" href="https://gist.github.com/bdno86/d1f49b6f533df3f832b39d6cc3194303">gist containing the font</a> which you can mess around with.</p>
<p>We can utilize the <code>text-rendering</code> CSS property to allow us to choose quality over speed, as well as some vendor specific properties to make our font sharper. <strong>Note:</strong> These should work for Chrome, Safari, and Firefox on Mac.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">body</span> <span class="token punctuation">{</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> Camphor<span class="token punctuation">,</span> Open Sans<span class="token punctuation">,</span> Segoe UI<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token property">text-rendering</span><span class="token punctuation">:</span> optimizeLegibility<span class="token punctuation">;</span>
<span class="token property">-webkit-font-smoothing</span><span class="token punctuation">:</span> antialiased<span class="token punctuation">;</span>
<span class="token property">-moz-osx-font-smoothing</span><span class="token punctuation">:</span> grayscale<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<h3 id="example">
<span class="icon icon-link"></span>Example
</h3>
<p>In this example, I apply <code>-webkit-font-smoothing</code> followed by <code>text-rendering</code>.</p>
</main>
The relevant part is the nav part only. The rest of the boilerplate is to add content so it enables scroll.
I have created a Tailwind Play reproduction.
Basically, I want to scroll with a sticky nav wihout overlapping content. How can I achieve that effect?
I added backdrop-filter backdrop-blur to nav to add the blur effect but the content scrolls above nav as my height probably isn't enough.
I added some height to the header & bunch of other properties like:
height: 92px;
background: darkred;
position: relative;
top: 0;
But it isn't going to the top completely. I think I need to add a plain ol' div with a background color that is similar to body but I am confused where I should put it? Or it should be on the header?
I want the nav to be prominent basically with content scrolling below it if it makes sense. How do I do it?
I managed to make it sticky with content going under getting blurred using few tricks:
Changed margin to padding so mt-12 becomes pt-12
Added pb-10
Changed backdrop-filter backdrop-blur from nav to header
This is the code that has changed:
<header
className="sticky top-0 z-10 pt-12 pb-10 backdrop-filter backdrop-blur
dark:bg-primary dark:text-white"
>
<nav
className="flex items-center justify-center h-16 font-semibold text-sm
after:absolute after:inset-x-0 after:w-full after:h-12 after:shadow-hr after:z-[-1]"
></nav>
</header>
folks,
Please, I'm experimenting with TailwindCSS v2.1. It look great, but I cannot find in documentation this problem.
Please, how can I do the mx-auto in flex for the center object for mobile devices (when 2 pictures cannot be beside) but otherwise I want normal behavior. Yes, I can change the main div in every card from
<div class="mt-5 px-2 md:px-5">
to
<div class="mt-5 px-2 md:px-5 mx-auto">
And it's OK but the last card is centered as well when I have bigger screen (odd cards, last one is always centered). But I want center only when all cards are one under second.
One my card:
<!-- First card -->
<div class="mt-5 px-2 md:px-5">
<div class="max-w-xxs rounded-2xl shadow-md overflow-hidden bg-red-700 text-white">
<figure>
<img class="object-scale-down w-96" src="https://zrebec.sk/assets/tt1.jpg" alt="Man looking at item at a store" />
</figure>
<header class="flex m-2 justify-items-start font-semibold">
<div class="inline-flex items-center border-2 border-black w-20 rounded-md mr-2 px-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
</svg>
<span>186</span>
</div>
<div class="inline-flex items-center border-2 border-black w-20 rounded-md px-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.43a2 2 0 00-1.105-1.79l-.05-.025A4 4 0 0011.055 2H5.64a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z" />
</svg>
<span>12</span>
</div>
<div class="flex-auto font-bold w-100 text-right">84%</div>
</header>
<article class="m-2">
<h2>Gold Retro</h2>
<p class="text-gray-300 my-2">The Compact Cassette or Musicassette (MC), also commonly called the tape cassette, cassette tape, audio cassette, or simply tape or cassette, is an analog magnetic tape recording format for audio recording and playback. It was developed by the Dutch company Royal Philips in Hasselt, Belgium, by Lou Ottens and his team. It was introduced in September 1963. Compact Cassettes come in two forms, either already containing content as a prerecorded cassette (Musicassette), or as a fully recordable "blank" cassette. Both forms are reversible by the user.</p>
</article>
<footer class="flex items-center h-10 space-x-1 m-2">
<div class="flex-1 text-center text-xs text-white font-semibold bg-green-500 px-3 py-1 rounded-md">Retro</div>
<div class="flex-1 text-center text-xs text-black font-semibold bg-yellow-500 px-3 py-1 rounded-md">Continuous play</div>
<div class="lex-1 text-center text-xs text-black font-semibold bg-red-500 px-3 py-1 rounded-md">Worse quality</div>
</footer>
</div>
</div>
Whole code from playground is here:
https://play.tailwindcss.com/g2Zso9QsCv
Or here in codepen:
https://codepen.io/littleTheRabbit/pen/jOyzrLb
And please, I don't want use Javascript to block mx-auto for last card. I think that flexbox can do that. Specially with Tailwind CSS. Please, try the TailwindCSS solution if is possible. I can write own CSS but then I don't need Tailwind. I want to discover power of TailwindCSS
PS: I added xss size in the config file (otherwise is standard TailwindCSS Code.
Maybe grid does more of what you want.
<div class="grid md:grid-cols-2 lg:grid-cols-3 justify-items-center max-w-5xl mx-auto">
Check our your example using grid:
https://play.tailwindcss.com/89CSaFNmLi
Add justify-center to
<div class="flex flex-wrap gap-5 justify-center">
What about this one?
Change the cointainer <div> to:
<div class="grid justify-items-center sm:grid-cols-2 md:grid-cols-3 lg:flex lg:flex-wrap">
This causes that I will grid with justify-items-center but in large screens I will have wrapped flexbox. Your opinion please?