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
Related
I have a list of episodes that I want to have a fixed height. I tried to line-clamp-2 for the episode title that has text that is longer than 2 lines.
Everything is working on my normal PC view, even if I open Dev Tools and view it as device view, it still displays as I want, but after I use my real phone, which is iPhone to view it, it has a problem which I wasn't expecting at all because there's none when I was CSS it on my PC.
What I did, I set every episode item of mine to fixed 70px height, have 12px padding to left and right, and 0.25rem padding for top and bottom. I tried the solution like this post: line clamp (webkit) not working in safari
Which is to put the overflow-hidden and line-clamp to the div instead of the actual p tag, and in the p tag using the inline display, but in my case, it is not working.
I'm using a tailwindCSS to CSS my component in React. Here's how I tried so far:
<div className="lg:h-[calc(100vh-60px)] overflow-y-scroll bg-[#222] h-[30vh] max-lg:mb-[20px]">
{listEpisode.map((item, i) => (
<Link
to={`episode-url`}
key={i}
className="w-full h-[70px] px-[12px] leading-normal
py-1 hover:text-white hover:opacity-80 hover:bg-white/20
duration-200 ease-in-out line-clamp-2 overflow-hidden
odd:bg-[#111111] even:bg-[#272727]"
>
<p className="inline after:whitespace-pre">
{item.title}
</p>
</Link>
))}
</div>
The result I get when in Dev Tools on Chrome, I set viewpoint to iPhone 6/7/8 (because I'm using iPhone 7, too)
PC with device viewpoint (working as expected):
On the actual device using safari - mine is iPhone 7 (which is not working as I expect it to be):
I don't know what's the cause of this, so I can't come up with a solution to fix it, because it was normal on PC.
I've managed to handle this through test here and there a bit around my CSS.
I change a little bit how I style it. First, I set my a tag as a flex and set a fixed height for it (I change my fixed height to 80px, looks better for me), with padding, and margin stuff around the a tag and my a tag is the parent element, then inside, I wrap my paragraph p tag inside a div, I
don't set that div to have any height, so it'll take auto height, inside a div, which now is a paragraph, I finally set it to line-clamp-2 directly.
Here's the result that I have now on my device, the PC is always working fine:
Note: I have 2 div inside the a tag because I changed my mind on how to make it suit my liking, and that's why I have some div that has flex, you might not need it, but I hope those who have the same problem get an idea.
This is my Tailwind CSS:
<div className="lg:h-[calc(100vh-60px)] overflow-y-scroll bg-[#222] h-[30vh] max-lg:mb-[20px]">
{listEpisode.map((item, i) => (
<Link
to={`episode-url`}
key={i}
className="flex items-center h-[80px]
px-[12px] py-[8px] w-full hover:text-white
hover:opacity-80 hover:bg-white/20 duration-200 ease-in-out"
>
<div className="mr-[6px] h-full flex items-center justify-center text-amber-400 ">
<p className="font-extrabold px-[4px] border-r-[2px] opacity-80">
{i+1}
</p>
</div>
<div className="mx-[6px] w-full flex">
<p className="line-clamp-2 w-full text-[#E2DFD2]">
{item.title}
</p>
</div>
</Link>
))}
</div>
In tailwind css, we can say lg:hidden to hide element from the lg size screen.
In the below example, we do not specify the screen size so 01 is entirely hidden from any screen.
<div class="flex ...">
<div class="hidden ...">01</div>
<div>02</div>
<div>03</div>
</div>
I want to achieve only show element from lg size but hide mobile size. However, tailwind css breakpoints are based on min width so if we specify sm:hidden, for example, min width from 768px are all hidden.
Is there any way I can just show element from specific screen size but hide below that screen size in Tailwind CSS?
Is this what you want?
<div class="flex ...">
<div class="hidden lg:block...">01</div>
<div>02</div>
<div>03</div>
</div>
Use lg:visible to apply the visible utility at only large screen sizes and above.
<div class="flex ...">
<div class="invisible lg:visible">01</div>
<div>02</div>
<div>03</div>
</div>
Refer here also
use hidden class as default property and then use md:flex as it will hide the div for breakpoints below md and show it on all the breakpoints above md
<div class="flex ...">
<div class="hidden md:flex">01</div>
<div>02</div>
<div>03</div>
</div>
For my use case, I was trying to conditionally add a break statement to a set of words.
I used the following code:
className="hidden lg:inline
I'm wondering how can I remove background color from an existing div for a specific xl screen size? I want something like this background-color:unset, is this possible with tailwind.css?
<div class="fixed bottom-0 bg-baseorange p-4 left-0 w-full z-10 xl: bg-none xl:absolute lg:absolute xl:bottom-22 xl:right-20 lg:bottom-22 lg:right-20">
</div>
You can use xl:bg-transparent.
In Tailwind, the class bg-transparent sets the css property background-color: transparent;
Tailwind documentation:
https://tailwindcss.com/docs/background-color
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'
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.