I've been working on a side project to learn tailwind css and i'm facing an issue with the responsiveness of my flexbox direction.
From what i've read you can make an html tag responsive by adding sm: md: lg:
so it will use the corresponding class based on the screen resolution. But when i try this with flexbox it doesn't work.
This is a piece of my code: <div class="flex-col md:flex-row h-screen w-screen m-3">.
As you can see i want to use flex-row on a screen larger than md:. But it keeps using flex-col even when i exceed the md: resolution which is 768px.
Full code: https://codesandbox.io/s/pedantic-hoover-lr93g?file=/index.html
This is how it looks when i remove flex-col and only use flex:
https://imgur.com/a/tUJKPro
You cannot use flex-col or flex-row (and other flex classes) without "flex" alone. Class "flex" corresponds to "display: flex" (without it your divs are blocks) and "flex-row" is "flex-direction: row" that will not work without flex display property.
Check the docs: https://tailwindcss.com/docs/flex-direction
So instead
<div class="flex-col md:flex-row h-screen w-screen m-3">
should be
<div class="flex flex-col md:flex-row h-screen w-screen m-3">
Fixed code: https://codesandbox.io/s/admiring-framework-lxz8y?file=/index.html
Also modify widths on smaller devices the way you need them.
Related
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 have been building a responsive Web Application that on loading with an address bar hides the bottom-most navbar. Is there a way to load it with the entire layout?
Here's how it should load:
But here's how it loads on a smartphone:
However, when I scroll a little, it appears exactly as I want it to be:
I have used flex display as shown below: [I am using tailwind along with React JS]:
<div className='flex flex-col justify-around w-screen h-screen align-center'>
{topNavBarprops ? (
<TopNavBar {...topNavBarprops} />
) : (
<TopNavBar headerText={'Unverified Account'} />
)}
<div className='flex flex-col flex-auto max-h-screen overflow-auto'>
{childComponent}
</div>
<BottomNavBar />
</div>
Your body/content div is too tall, likely pushed down by the top navbar, to resolve this, you can set the height value of the body/content div to be calc(100vh - height of navbar here)
I'm embedding React Draft Wysiwyg component within a flexbox. The flexbox should consist of this component alongside a circle div.
For some reason, the circle div gets squished and is not circular, but instead is narrower than it should be.
I can reduce this 'squishiness' by passing the wrapperClassName prop and adding w-fit (which is the Tailwind equivalent of width: fit-content; in pure CSS), however, the circle is still squished on narrower screens.
Image:
Code:
<div className='flex gap-x-2 items-center w-full min-w-[480px] h-full py-3 px-2 bg-gray-50 rounded'>
{/* Rich text editor component */}
<Editor
wrapperClassName='w-fit'
/>
{/* Circle */}
<div className={'group w-9 h-9 rounded-full'} />
</div>
How can I get the Editor component to take all remaining width without taking away the space that the circle div needs to remain a proportional circle?
You could give the Editor w-full and give the circle a p-5 instead of w-9
Is this what you meant: https://play.tailwindcss.com/cPxzlro2re
i want use px-4 for footer only
lg:px-4
but it does not work
<footer class="footer py-5 text-white bg-gray-800">
<div class="flex flex-col items-center justify-between lg:flex-row max-w-6xl mx-auto
lg:space-y-0 space-y-3">
<div class="space-x-4 lg:px-4">
<i class="icon-brand-instagram text-lg text-white text-opacity-75 text-md hover:text-white"></i>
</div>
</div>
</footer>
My sample image
According to the official docs, the lg prefix value is for screens large than 1024px.
So, if your screen size is less than 1024 px, you probably will not see the effect.
A quick zoom out in your browser can give an idea if the padding is applied or not.
You also can change this default value by using custom breakpoints in your tailwind.config.js file
px will specify the padding horizontally
and lg specifies the break point for responsive screen
lg = 1024px #media (min-width: 1024px) { ... }
its not working maybe because of your screen size. try to open it in dev tool of chrome and change screen size and take it below/above 1024. it will work
I am trying to create a responsive grid layout in tailwind CSS with one column on small screen size, and two columns on everything else. And I set the grid to have max-width so that the grid element has a max-width. However, 'max-w-md' is is overridden by 'sm:max-w-6xl' on small screen size. Am I missing anything or is there a workaround? See code and screenshots below:
<main class='container mx-auto'>
<div class='grid grid-cols-1 gap-4 max-w-md mx-auto sm:grid-cols-2 max-w-6xl'>
<div class='h-60 bg-red-100'>1</div>
<div class='bg-red-200'>2</div>
<div class='bg-red-100'>3</div>
<div class='bg-red-200'>4</div>
<div class='bg-red-200'>5</div>
</div>
</main>
Small Screen Size
Medium Screen Size
As shown on screenshots, the 'grid-cols' properties work fine with breakpoints but the 'max-w' do not.
max-w-md will be active till the width reaches 639px. After this point sm:grid-cols-2 will be active from 640px to 767px
responsive grid layout in tailwind css with one column on small screen size, and two columns on everything else
In such case, I suggest to use md:grid-cols-2 instead. It triggers at 768px
class='grid grid-cols-1 md:grid-cols-2 gap-4 max-w-md md:max-w-6xl mx-auto'