How to make all cards with equal height?

Home Forums Porto – Responsive HTML5 Template How to make all cards with equal height?

  • This topic has 1 reply, 2 voices, and was last updated 1 month ago by Support. This post has been viewed 153 times
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #10044957

    Can you tell me how can I let the carousel cards with the same heights? Here is my screenshot:

    Is there any css class can use to keep all cards in the same height?
    Here is the partial code:

    <div class=”owl-carousel nav-outside nav-arrows-1 custom-carousel-box-shadow-1 appear-animation” data-appear-animation=”fadeInUpShorter” data-appear-animation-delay=”750″ data-plugin-options=”{‘responsive’: {‘0’: {‘items’: 1}, ‘479’: {‘items’: 1}, ‘768’: {‘items’: 2}, ‘979’: {‘items’: 3}, ‘1199’: {‘items’: 3}}, ‘autoplay’: false, ‘autoplayTimeout’: 5000, ‘autoplayHoverPause’: true, ‘dots’: false, ‘nav’: true, ‘loop’: false, ‘margin’: 10, ‘stagePadding’: ’75’}”>

    <div class=”card border-radius-0″>

    <div class=”card-body text-center”>

    <p class=”card-text font-weight-light”>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra erat orci, ac auctor…</p>



    Hi, the easiest way to do that inside the carousel is to set a min-height in the card-body, for example:

    <div class="card-body text-center custom-card-body">

    CSS (css/custom.css):

    .custom-card-body {
    	min-height: 200px;

    * Set that size based in the content you have.

    Best Regards,

    Okler Themes

Viewing 2 posts - 1 through 2 (of 2 total)

This topic is marked as "RESOLVED" and can not rceive new replies.