I have a Sandbox of this project I am working on and while I'm happy with getting the JS part pretty much done, the Responsive Design is driving me a bit bonkers and I'm sure this is a simple solution with Flex but I cannot get it.
Currently the desktop view is correct and looks how it should, mobile and tablet however are not. In Mobile, the only issue is the image needs to be directly below the tabs but above the planet content. In Tablet, the Image is above both, which are then flexed together right below the image. I know one issue is I have a box container in FlexTest.js that holds BOTH the tabs and the content, so I was unable to use flex order for position there, but without those in the same container I was having issues getting them to position correctly in a different view.
This is what the design is meant to look like in case my description was really bad.
I would like to give its idea in tailwind-css.
You need to switch the flex-row and flex-col properties to get this functionality to work in tailwind-css.
Output in mobile devices
Output in large devices
Code:
<div class="flex flex-col">
<div class="bg-blue-400 text-center text-4xl">Header</div>
<div class="flex-1 flex-col sm:flex sm:flex-row">
<div class="flex items-center justify-center text-center">
<img class="p-10" src="https://www.quicksprout.com/images/foggygoldengatebridge.jpg" alt="images" />
</div>
<div class="m-10 flex items-center justify-center border-4 border-red-400 text-3xl">Your Main content goes here</div>
</div>
<div class="bg-blue-400 text-center text-4xl">Footer</div>
</div>
Tailwind-play
Related
I have a fixed aspect ratio area in my layout using Tailwind 3. It is defined like so...
<div class="grid grid-cols-1 lg:grid-cols-2 lg:grid-rows-1">
<div class="text-xl text-gray-700 lg:text-lg [&>p]:py-5 [&>p]:pl-5">
<p>Lorem ipsum</p>
</div>
<div class="grid place-items-center">
<div class="aspect-9/16 w-full bg-blue-300 lg:min-h-full lg:w-auto">
<div>
wevs
wevs
wevs
</div>
</div>
</div>
</div>
It looks like this, which is what I want, the bottom parallel with however long the text on the left happens to be. If I add more text on the left the fixed aspect area on the right scales to the height of the content on the left.
So I want that fixed aspect ratio area to contain its contents without changing size but when I put some extra content into it the whole container grows. Admittedly it grows in the fixed aspect ratio I have set so that is nice, but I'd rather it didn't grow at all!
Here is a link to a full example on Tailwind Play: https://play.tailwindcss.com/oNjWgFb2AW
With a wide screen (1440px) if you keep adding "wevs" you will see the effect.
I've tried a bunch of way to fix the width and also tried playing with limiting the height fidgeting with the grid values but I'm not having any luck. Everything I've tried seem to either break the aspect ratio part, or the container still scales up with the content. 🙏
I added max-h-0 and it works
...
<div class="max-h-0 aspect-9/16 w-full bg-blue-300 lg:min-h-full lg:w-auto">
...
here is with the example of your playcode https://play.tailwindcss.com/32quTcDj51?size=1440x803
I'm (very) new to Tailwind and have encountered a problem that is driving me crazy. I'm looking to place an image in a footer. At desktop size (1024px), the image needs to sit to the left of the footer content and then on smaller screens, the logo needs to be centered, pretty standard stuff. As with non-tailwind css, I'm using margin to control this and as guided in the documentation, my default setup is in mobile-first so the horizontal margin is set to auto with the following to put the image in the middle with the aim for it to be set to the left when being viewed at a bigger resolution:
<img alt="..." :src="logo" class="mx-auto"/>
The key thing here is mx-auto which centers the image. As per the documentation, I then want to remove the auto-positioning so I add the following to adjust the margin once the screen is at a bigger resolution.
<img alt="..." :src="logo" class="mx-auto lg:mx-0"/>
However, when I run this the image just stays positioned in the center of the element when at full desktop resolution. I've tried using ml-0 just in case there was a problem overriding the original setting but in the inspector, the media query doesn't even attempt to override.
I'm building from a template that does similar things to what I want elsewhere in the project however when I copy that code over, it works until I make a change to the setting (changing a -16 to a -20 etc...) which is also odd. I'm not sure if I've messed something up with my configuration or am just missing something basic but any pointers would be really appreciated.
Just in case its something to do with the container the image is in, here's the wider container:
<div class="container mx-auto px-4">
<div class="flex flex-wrap text-center lg:text-left">
<div class="w-full lg:w-6/12 px-4">
<img alt="..." :src="logo" class="max-w-250-px pb-4 mx-auto lg:mx-0"/>
</div>
</div>
</div>
Maybe something to do with the flex?
It is max-w-[250px] not max-w-250-px
Why not use the flex container you already have to get it done?
What you want is this: https://play.tailwindcss.com/wgHwT7KMJ5
i am following a tutorial by chris sev on Better Dev channel.
Here is the codepen for the tutorial.
I want to make this sidebar fixed and avoid scrolling. Right now if i put content the sidebar also scrolls with the content.
i have tried fixed top-0 and sticky top-0on the div with the sidebar class.
None of this seemed to do it. Anyone know how to make the side bar fixed?
the main problem of your example was the wrong usage of flex and how you implemented it.
Here's a clean version of your codepen link (without the mobile version, I'll let you deal with that ;)
In short, you need to make sure the FLEX main app will use the full window size :
<div id="app" class="fixed flex w-full h-full ...">
Once the main app is set, you will just need to adapt the children to your needs :
<div id="sidebar" class="w-64 ...">
As you can see, you just need to set the width for the "static" element (the one that needs to stay always the same)
The dynamic element – the content container – will have more flexibility, therefore we apply .flex-1 :
<div id="content" class="flex-1 overflow-auto ...">
This is not really related to tailwind but rather to display: flex; itself.
(PS : I've edited so you only see the important classes)
I want my header to stay large at all times. Heres my code.
<h1 className='main-title sm:text-4xl md:text-5xl lg:text-5xl xl:text-5xl font-bold '>
Men i minimise the screen the text goes to a small size and doesn't stay large.
By default, Tailwind uses a mobile first breakpoint system.
<h1 class='main-title text-4xl md:text-5xl font-bold' />
I'm stacking a series of small divs to show a series of statistics. The problem is to display them correctly on a mobile phone. Can you suggest an alternative for me? It's worth noticing that this design came from an admin template.
This is what you'd see on a bigger screen:
And the following is the way the cubes are displayed while using a cellphone:
<div class="col-2">
<div class="bg-success p-10 text-white text-center">
<i class="fas fa-warehouse m-b-5 font-16"></i>
<h5 class="m-b-0 m-t-5">414</h5>
<small class="font-light">Bodega stock</small>
</div>
</div>
I've read about responsive typography but I'm not sure how should I proceed.
From a designer point of view, I think what you should do is making the bottom columns be rows instead, so, in mobile, they would all be the same width as the blue box.
This should be pretty easy using Bootstrap 4, your col div would be:
<div class="col-xs-6 col-sm-4> ... </div>
Something like that.
In my opinion you have two options :
Display the 'total disponible' and 'total reversa' side by side on big screen, but one under each other on responsive, which can be easily done using flexbox
Like a fellow said above, display the green, black and yellow divs in column, with width set to 100%