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'
Related
I am working on a touch screen display for a museum. The screen will display old photos with touchable zones laid on top of it that reveal more information about people/objects show in the photos.
The screen size is fixed (it's a TV) but the photos could be in any aspect ratio; landscape or portrait.
There will be a header and footer at the top and bottom of the screen. In the middle I want to display the photo as large as possible. That is to say:
if the photo is portrait it should span the full height between the header and footer with empty space to the left and right.
if the photo is landscape (more landscape than the TV is) it should span the full width of the screen from left to right with empty space above and below.
This, I believe, is classic object-fit: contain; behaviour.
What I'm struggling with is adding the overlay on top. This consists of many rectangles that a user can touch. I know the top and left position and width and height of each box as a percent of the image it is overlaying.
I have made a tailwind playground here: https://play.tailwindcss.com/1c8QufeAFj
My understand is that I can't add the overlain boxes as children of the <img> tag, so they are placed in a <div> that is the <img> tag's sibling.
<!-- Check out the tailwind playground to see a live preview -->
<div class="flex h-screen flex-col">
<div id="header" class="bg-gray-500 p-6"><p>Header</p></div>
<!-- Main content which grows to fill the space between the header and footer -->
<main class="grow bg-gray-900">
<!-- Wrapper around the img and it's overlay -->
<div id="wrapper" class="relative">
<!-- The image: Should be as large as possible within main content (object contain style behaviour) -->
<img class="h-full w-full" src="https://placekitten.com/600/400" />
<!-- Div container boxes to draw on top of image (and move and scale with the image) -->
<div class="absolute inset-0 z-10">
<!-- Boxes overlaid on each kitten -->
<div style="left:48%; top:28%; width:11%; height:15%;" class="absolute border-2 border-orange-300"></div>
<div style="left:36%; top:29%; width:10%; height:14%;" class="absolute border-2 border-orange-300"></div>
<div style="left:16%; top:33%; width:10%; height:14%;" class="absolute border-2 border-orange-300"></div>
<div style="left:69%; top:43%; width:11%; height:15%;" class="absolute border-2 border-orange-300"></div>
</div>
</div>
</main>
<div id="footer" class="bg-gray-500 p-6"><p>Footer</p></div>
</div>
Since the boxes' positions and sizes are relative to the image, this sibling div must have the same size as the img at all times.
I can't get this to work with object-fit:contain; the sibling div that contains the boxes doesn't have the same size as the img so the boxes don't line up where they are supposed to.
If I try to find a solution without object-fit then I can either get it to work for portrait photos (using h-full) or landscape photos (using w-full) but I haven't managed to find code that works for both portrait and landscape.
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 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'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.
I have the following html:
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-8">
...
</div>
</div>
The problem is that I get a 1 column offset even when the view port is larger than 768px (the xs size). Any ideas why am I getting this offset?
Because that's what you told it to do. As the Bootstrap docs say:
Grid classes apply to devices with screen widths greater than or equal
to the breakpoint sizes, and override grid classes targeted at smaller
devices.
So you can override your xs offset with a sm one:
<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-0">