Cards – Same Height

Home Forums Porto – Responsive HTML5 Template Cards – Same Height

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10030281
    simplyjessica
    Participant

    Hi guys,

    I’m using cards, four in a row, with several rows. How can I make them all the same height?

    The issue is some have more text than others, and it’s just not a nice optically, looking to keep same height.

    						<div class="portfolio-item hover-effect-1">
    
    							<div class="card border-radius-0 bg-color-light border-0">
    								<div class="card-body">
    									
    										<i class="icon-badge icons text-color-primary text-8"></i>
    										<h4 class="card-title mb-1 text-4 font-weight-bold">
    											<?php echo $fileName; ?></h4><hr>
    										<a href="committee_details.php?cid=<?php echo $ticketID; ?>" class="btn btn-primary">Details</a><br>
    									<?php echo $comTags; ?></p>
    									
    								</div>
    							</div>
    
    						</div>


    Template Version: 7.5.0
    #10030285
    Support2
    Keymaster

    Hello,

    By the <div class="portfolio-item hover-effect-1"> probably you are using a “Sort” with isotope-item wrapping each element, right ?

    In that case the best solution is create a custom class for the cards:

    <div class="card my-custom-card border-radius-0 bg-color-light border-0">

    And define a min-height in (css/custom.css):

    .my-custom-card {
        min-height: 500px;
    }

    * Change the 500px to a new value that fits with your layout.

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10030288
    simplyjessica
    Participant

    Yes I’m using a sort feature as well, thanks so much this will be perfect!


    #10030301
    Support2
    Keymaster

    Hello,

    Great!

    If you need further assistance, feel free to contact us.

    Kind Regards,

    Rodrigo.


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

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