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
Related
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 building a section with a text on the left side and a background image tied to a right side of a browser. Both text and image have about 50% width while using desktop device.
For desktop device solution, I've coded it like this:
http://www.bootply.com/xxyOcA9N5n
However, problem arises when I try to make it responsive. My preferred goal would be that the content gradually "pushes" background image to the right (out of the browser's "canvas"). In extreme case, it would look like this: Image nearly disappeared and text is readable.
Can you please help me figure out, how to solve this?
Add another col-sm-6 and place the image in there with a 100% width so it scales as the size gets smaller. You can also use media queries to define how you want it to look at various sizes.
<div class="container-fluid hp-about">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Company</h2>
<p class="large">We are doing this and this and it is
awesome because this and that. Yeah and also this and that.
And also that.</p>
<p>More about us »</p>
</div>
<div class="col-sm-6"><img src=
"http://i.imgur.com/HGp1ot6.png"></div>
</div>
</div>
</div>
I have 2 divs
<div class="col-lg-10 hidden-md">ABC</div>
<div class="col-lg-2 hidden-md">123</div>
"ABC" has content that won't resize (intentional)
When there isn't enough room to fit "123", Bootstrap will move it under "ABC". I want "123" to disappear in this case, not ever go "under".
Is there a way?
Note I have hidden it for md and below.
EDIT: This code is Bootstrap 3 specific - see Alec's comment for Bootstrap 4 information.
The hidden-md class doesn't actually hide the element for viewports at or below the "medium" viewport width, it hides the element when the viewport falls into the medium width only.
You should be able to use the Bootstrap .visible classes to hide certain elements with this class when the viewport is smaller than a specified size. In this case, the second <div> will only show when the viewport is "large", and disappear when the viewport is smaller than "large" (i.e. medium, small, etc.).
<div class="container-fluid">
<div class="row">
<div class="col-lg-10">ABC</div>
<div class="col-md-2 visible-lg">123</div>
</div>
</div>
Here's a CodePen example - try stretching and shrinking the browser's width to see what's going on.
I just started to use angular ui-layout to allow splitting panes in a UI.
I'm trying to create a sidebar that has this blue element on the bottom
Is there a way to trick the ui-layout directive to achieve this? I tried doing size, but that just does absolute sizing, I want the bluebox just take up some space (showing 100% of its content) and the element above it needs to scroll and take up the rest of the vertical space.
EDIT: added the HTML
<ui-layout options="{ flow: 'row' }">
<div ui-layout-container> top part </div>
<div ui-layout-container> blue box</div>
</ui-layout>
I don't know why you want to use ui.layout, but I would not recommend to use it to achieve what you want.
ui.layout uses flex box model and you can use it by yourself without using another invasive javascript layout. You can fully achieve what you want using css only.
This is what I did to achieve what you want only using CSS. http://plnkr.co/edit/0mSxkNC5wl6WTbWc81z6?p=preview.
<div class="container flex flex-column">
<div class="top flex flex-row flex-auto flex-stretch">
<div class="flex-auto">Top</div>
<div class="sidebar">sidebar</div>
</div>
<div style="background:blue">Bottom</div>
</div>
If you are very interested in using Flex layout, I would recommend to use Angular Material Design, and it is advanced and makes more sense than ui.layout.
To know more about flex box, you can see this example.
http://plnkr.co/edit/lxx7QCwZbeZyyUtwiCym?p=preview.
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.