I'm building a website in tailwind CSS. I'm new to it and I don't know how to customise the height. I want my image height to be exactly 40rem=640px. But the max height I could give in tailwind is 24rem 384px. How to go about it?
You can provide custom height like this, h-[40rem]
Full example in React:<img className="h-[40rem] text-white" src="http://src.com">
Or in pure html: <img class="h-[40rem] text-white" src="http://src.com">
Related
I'm working on this TailwindCSS project where I have a logo to the left and navigation to the right. Both of them are centered. Because the logo is position:absolute; the navigation is behind the logo. I want them to be side by side. I'm using flex. Is it possible? I'm not sure if grid will be a better solution.
This is the link to tailwind playground.
The simplest solution would be to apply padding-right to the logo.
Change this...
<span class="logo flex items-center">...</span>
...to this.
<span class="logo flex items-center pr-10">...</span>
See the snippet.
I think the best option is to put the logo inside the <ul>...</ul> inside an extra list (<li>) item. This way it will allways be next to your homepage link, and won't overlap. You will have to add the width of the image to the <li> element.
An example is seen here:
https://play.tailwindcss.com/NlxxGIsX1v?layout=horizontal
I've been trying for some time to find a way to have a video as a background in a div which has an overlay making it darker. Also, there should be text in the div container, does anyone have a suggestion on how to do this in Tailwind?
I have presented the whole thing like this. Thanks for your ideas and help.
You can use the brightness-* class utilities to darken the video applying the filter property without another element.
<video class="... brightness-50"></video>
Or if the element containing the text has the same width and height as the video, you can use the backdrop-brightness-* class utilities to apply the backdrop-filter to the div
<div class="w-full h-full backdrop-brightness-50">
...
</div>
Assuming the video gives your div "volume", the easiest way is to use a structure like this:
https://play.tailwindcss.com/DS33YxNtF5
But there are a million ways to achieve something like this. Also. it depends a lot on various other factors that themselves depend on your page structure, etc.
I would refrain from adding opacity to the video because it can be heavy to continuously render.
Is it possible with Angular flex-layout apply responsive api on wrappers not on whole screen?
If I have code:
<div class="main-wrapper" fxLayout.sm="column" fxLayout.gt-sm="row" >
<div>div1</div>
<div>div2</div>
</div>
Flex direction will change only when whole screen is smaller. Is there any way how to change flex dirrection when main-wrapper is small, not the screen?
If not with flex layout, is it possible to do it with css?
There's no way to do what you would like to do. The best that you can do is set your custom breakpoint as said in the official GitHub project here.
I am to looking to find out how i can add image that will take up the full width of the screen.
I have currently downloaded the new version of Joomla 3.7.4 and have duplicated the Protostar Template to try and do this.
Any advice would be really appreciated.
Do you just want to use the whole width of the content area? If so you can do this with plain CSS. Just add style="width: 100%" to the image tag like <img src="" style="width: 100%;">. A better way would be to add a new style to the templates CSS file.
I usually upload images larger than the maximum size and have a general CSS rule for images img {max-width: 100%}. Images will be scaled down to fit the width of the content area so I don't need to add additional style information to each image.
I have created a grid of images using Bootstrap 3's .thumbnail class. Everything seems to be working great with regards to the images resizing, and the columns changing depending on the window size. The only problem is the images are all different sizes, and both portrait/landscape orientation. This causes awkward breaks and "pile-ups" with the thumbnail divs…
I was hoping to find a way to create a grid of SQUARE responsive divs using the .thumbnail class. So in other words, the width determined by Bootstrap would be mirrored in the div's height. E.g. the thumbnail image is scaled to 220px so the height of the div containing it would be set to 220px as well (and the thumbnail image inside scales up to 100% of eight the height or width, depending on orientation). Sort of like this:
Here is the basic code I'm using:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3">
<img src="<?php echo $image->url() ?>">
</div>
</div>
</div>
Thanks so much for any help you might be able to offer. I'm also open to suggestions for other approaches. I even tried using jquery Isotope's masonry setting to solve the pile up problem but couldn't get it to work :(
You could try a CSS only approach like this this..
http://bootply.com/85737
However, this is not cross-browser compatible so you still may want to use the Isotope plugin. Here is a working example that uses Isotope + Bootstrap..
http://bootply.com/61482
I have created a small plugin for bootstrap, called bootstrap-grid-h. You can try using it. It is css only solution. You can find it here: bootstrap-grid-h
For something like this I would recommend using masonry which will give you a pinterest effect where images will fit in a block style without breaks.
such as: http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout