Flex Box

[masterc62]

Hi,

I’m unable to get div-Boxes, like cards for example, at the same height with unequal content. I’ve tried it with different demo-pages. What css-class is necessary in addition to give the boxes the same height automatically?

THanks,
Chris

---

[Support]

Hello, try to add classes flex-fill or h-100 to the cards/divs.

If the problem persists, please send me your site so I can check the HTML structure.

Thanks.

---

[masterc62]

Hi and thank you for this hint!

css-class h-100 works very well at any cards (only flex-fill does not).

But for the cards/articles of an owl-carousel this workaround works not. The cards/articles have already different heights. Is there a special parameter at the owl-carousel necessary?

Thanks,
Chris

---

[Support]

Hi, for that you need a custom css, here’s an example:

HTML:

<div class="owl-carousel custom-carousel-1 owl-theme nav-bottom nav-lg nav-transparent nav-borders rounded-nav" data-plugin-options="{'responsive': {'0': {'items': 1}, '479': {'items': 1}, '768': {'items': 2}, '979': {'items': 3}, '1199': {'items': 3}}, 'margin': 20, 'autoHeight': true, 'loop': true, 'nav': true, 'dots': false, 'stagePadding': 0}">
	<div class="py-4">
		<div class="card border-radius-2 bg-color-light border-0 box-shadow-10">
			<div class="card-body">
				<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nulla dui, in dapi.</p>
			</div>
		</div>
	</div>
	<div class="py-4">
		<div class="card border-radius-2 bg-color-light border-0 box-shadow-10">
			<div class="card-body">
				<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nulla dui, in dapi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nulla dui, in dapi.</p>
			</div>
		</div>
	</div>
	<div class="py-4">
		<div class="card border-radius-2 bg-color-light border-0 box-shadow-10">
			<div class="card-body">
				<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nulla dui, in dapi.</p>
			</div>
		</div>
	</div>
	<div class="py-4">
		<div class="card border-radius-2 bg-color-light border-0 box-shadow-10">
			<div class="card-body">
				<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nulla dui, in dapi.</p>
			</div>
		</div>
	</div>
	<div class="py-4">
		<div class="card border-radius-2 bg-color-light border-0 box-shadow-10">
			<div class="card-body">
				<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nulla dui, in dapi.</p>
			</div>
		</div>
	</div>
</div>

CSS (css/custom.css)

.custom-carousel-1 .owl-stage {
	display: flex;
}

.custom-carousel-1 .owl-item {
	display: flex;
	flex: 1 0 auto;
}

.custom-carousel-1 .card {
	height: 100%;
}

---

[masterc62]

Thank you very much for your great and fast support!
All works very well.

I love your template!
Chris

---

[Author]

Posts