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' />
Related
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
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'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%
What is the current standard way to handle responsive images in a mobile first approach?
That is: is there an accepted method in use today that allows small resolution images to be served to mobile/small screen width devices, while larger resolution images be served to tablet/desktop etc.?
Omit width and height on the <img /> tag, if it's parent element is responsive it'll scale.
Exactly, as sanusart wrote you.
For example, if you use Twitter Bootstrap extension (recognized by many as the best or one of the best responsive design-oriented frameworks) and set it to use responsive design (not set, by default), then all you have to do, is to put your image inside responsive container, for example well:
<div class="well">
<img src="img/logo.png" class="img-polaroid" />
</div>
And your image will adapt its dimensions according to screen resolution.
If you would like to separate it with left and right margin,
you can use fluid layout, for example like that:
<div class="well">
<div class="row-fluid">
<div class="span2"></div>
<div class="span8"><img src="img/sunflower.jpg" /></div>
<div class="span2"></div>
</div>
</div>
But we aware, that on a wide screens (like phones in portrait mode) your left and right "separators" will be stacked top and bottom, which may produce unwanted side effects.