I am using bootstrap columns, and want the two columns col-md-4 and col-md-8 to be the same height no matter the content. As col-md-4 content will change.
<div class="col-md-12">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
A google maps is the only thing in the col-md-8 and the div id map within has the height of 600px.
Add display: flex to the container col-md-12.
You can set a max-height and it will not exceed that height. Since your map is 600px in height, you can set your col-md-4 to that height, and let the content overflow.
I made a Codepen example
Is this what you wanted?
Related
How can we make two div that their display in small screens be block . and in large screens be inline !?
also I want to their width be 100% of the screen
You should probably do something like this :
<div class="w-100 d-block d-md-inline">My first div</div>
<div class="w-100 d-block d-md-inline">My second div</div>
But you have to know that you can't define a size to an inline element. I think you would like to use "inline-block" instead of "inline".
I am trying to display some text and an image next to it in one row.
I am using Tailwind Css as much as possible and I would like to add and offset of 1/8 of the width so that there is some margin between the text and the image
<div class="grid section">
<div class="w-full">
<div class="w-5/8">
<p> Whatever text ...</p>
</div>
<div class="w-2/8">
<img src="whatever.png"/>
</div>
</div>
</div>
What would be the name of the offset class in Tailwind to add a left offset of w-1/8 to the img div wrapper, if there is one?
Thank you in advance guys!
You almost answered your own question:
... so that there is some margin between the text and the image
You need to add margin to the image. In this case you would add mt-20 (or possibly a different size) to image's div, which means margin top. Other margin classes exist and they are well documented.
Live example here.
I have a that is changing in width (col-x) and in height (h-100) depending on the browser window. Inside that div is a very large image being displayed. The problem with .img-fluid is that it is only constraining in width, depending on the container. But I need a solution that also scales height, when the size of the container div shrinks. But I have not found a solution.
I tried different combinations of min-height, max-height, object-fit and so on, but always the image does not shrink in width, when the container gets smaller (or then when the proportions of the div change from portrait to landscape it does not follow.
I tried to build a basic plunker to demonstrate using vh for the height of the wrapper. So the goal would be for both images to always stay inside the column. You can try playing around with the height and width of the browser to see the effect.
<div class="wrapper">
<div class="row h-100">
<div class="col-4">
<img src="https://i.stack.imgur.com/2OrtT.jpg" class="img-fluid" />
</div>
<div class="col-8">
<img src="https://i.stack.imgur.com/2OrtT.jpg" class="img-fluid" />
</div>
</div>
</div>
Styles:
.wrapper {
height: 60vh;
}
https://plnkr.co/edit/LbavqYXNNVlftUOw4Xfr?p=preview
Add css height:100%; for image
for example I have div, which has flex-basis:33%;
What native css-property can replace 'flex-basis'?
What solutions you can reccomend?
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 product_preview">1</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 product_preview">2</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 product_preview">3</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 product_preview">4</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 product_preview">5</div>
.product_preview{
flex-basis:33.333%;
max-width:33.333%
}
It's unclear what precise effect you are after but:
MDN Ref:
The flex-basis CSS property specifies the flex basis which is the initial main size of a flex item. This property determines the size of the content-box unless specified otherwise using box-sizing.
So, flex-basis is, essentially, the flexbox altenative to min-width (or min-height) depending on the flex-direction BUT the two aren't directly interchangable.
This is because even though an element may have flex-basis: 100px...the flex-shrink/grow properties allow for shrinking/growth.
However, if you are looking for the same overall functionality without flexbox then, as far as I am aware, it doesn't exist outside of javascript solutions.
If you want to delete flex-basis, you can use width or height instead.
That's because the initial value of flex-basis is auto, which means
When specified on a flex item, the auto keyword retrieves the
value of the main size property as the used flex-basis.
And the main size property is given by width (in row layouts) or height (in column layouts):
The flex item’s main size property is either the width
or height property, whichever is in the main dimension.
I'm making a slider using css3 transitions. Each slide has a different height (it could contain text/images/videos/mix all of it), width is the same but responsive (100% of the parent).
<div class="slider">
<div class="slide_container">
<div class="slide current">Different amount of content</div>
<div class="slide">Different amount of content</div>
<div class="slide">Different amount of content</div>
</div>
</div>
At the moment I make it work only with absolute positioning and fixed height.
Please see http://jsfiddle.net/j6eWG/1/
Is there any way I can wrap my .slider around slides that will not have fixed height?
I need to make .slider the same height as .slide.current (http://jsfiddle.net/j6eWG/2/)
Maybe there is some transform property I can use?