Make php generated divs same height responsive

Question

Problem: When I resize my screen, some titles exceed one line of text. This causes my layout to look weird.

Preferred solution: The image, title and subtitle stay where they are. The more button is aligned at the bottom of the div and the div height is determined by the highest item in that row. This all has to be responsive, so a fixed height won't be a solution.

PHP

<section id="disc-overview">
<?php
$sql = "SELECT id, title, date_released, produced_by, arranged_by, recorded_at, seo_link, taken_from FROM discography_overview WHERE artist = '1' AND type = '$type' ORDER BY date_released DESC";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $id = $row["id"];
        $title = $row["title"];
        $date_released = $row["date_released"];
        $date = DateTime::createFromFormat('Y-m-d', $date_released);
        $date_released = $date->format('F jS, Y');
        $produced_by = $row["produced_by"];
        $arranged_by = $row["arranged_by"];
        $recorded_at = $row["recorded_at"];
        $seo_link = $row["seo_link"];
        $taken_from = $row["taken_from"];

        echo "

    <div class=\"col-sm-3 disc-overview row-eq-height\">
        <div class=\"col-sm-12 text-center wow fadeInLeft\">
            <img alt=\"$title\" src=\"/images/discography/$seo_link-1.jpg\">
        </div>
        <h3 class=\"card-title\">$title</h3>
        <h4 class=\"card-subtitle\">$date_released</h4>
        <a href=\"/$type/$seo_link/\" title=\"Show details of $title\">
            <button class=\"btn btn-card\">MORE</button>
        </a>
    </div>";
    }
}?>
</section>

CSS:

    #disc-overview {
    padding-top: 50px;
    background-color: #ffffff;
    display: table;
    width: 100%;
}

.disc-overview {
    background-color: #ffffff;
    text-align: center;
    padding-bottom: 50px;
    display: table-cell;
}

.disc-overview img {
    width: 100%;
    vertical-align: middle;
    padding-bottom: 30px;
}

.card {
    text-align: center;
    border: 0;
    background: none;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
    position: absolute;
}

.card-title {
    text-align: center;
    color: #000000;
    letter-spacing: -1px;
    font-weight: 600;
    font-size: 20px;
}

.card-subtitle {
    margin-bottom: 0;
    font-style: italic;
    font-weight: 400;
    font-size: 15px;
    font-family: "Lora", serif;
    color: #5b5b5b;
    margin-top: -1rem;
    line-height: 1.7857;
    padding-bottom: 1rem;
    text-align: center;
}


.btn-card {
    background-color: #404040;
    border-color: #404040;
    letter-spacing: 2px;
    padding: 10px 20px;
    horiz-align: center;
    color: #ffffff;

}

.btn-card:hover {
    background-color: #f5f5f5;
    color: #404040;
    border-color: #404040;
    letter-spacing: 2px;
    padding: 10px 20px;

Instead of giving your php, can you provide the HTML that it outputs? — Kevin Jantzer, Aug 01 '17 at 19:27
I got an error message that it's too big to paste in a message. Would this help? [link](view-source:http://rwdb.info/redesign/discography_overview.php?type=single) — tampie, Aug 01 '17 at 19:33
Possible duplicate of [How can I make Bootstrap columns all the same height?](https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — miken32, Nov 29 '18 at 21:26

score 1 · Accepted Answer · answered Aug 01 '17 at 19:41

1

You can solve this with a javascript and jQuery solution. I have used the Match Height library library with this in the past and it has worked exactly how you described.

The library will look at all of the items in the row and calculate the item with the largest height. After that, it will apply that height to all of the other items in the row. You would do something similar to this:

$('.row-eq-height').matchHeight();

However, you can also use flexbox to solve this problem. One benefit to this is that it removes the need for additional JS assets. One downside is that it isn't supported by every single browser.

You would add this CSS:

#disc-overview {
  display: flex;
}

You can also use the flex-wrap property and set it to wrap to allow items to flow onto the next row. Here is an example of that, it works well in combination with the built in img-responsive class provided by bootstrap 3.x.

answered Aug 01 '17 at 19:41

kyle

2,563
6
22
37

Sorry, I'm quite a beginner, where should I put the $('.row-eq-height').matchHeight(); ? – tampie Aug 01 '17 at 19:54
@tampie That is the javascript option so it would need to be included after jQuery loads and in a – kyle Aug 01 '17 at 19:55
@tampie you could put it in your rwdb-custom.js file --- don't forget to include the match height plugin though. Load it in after your jQuery file AND before you call the matchHeight function. So you could load it after jQuery and before your custom js file. – kyle Aug 01 '17 at 19:57
Awesome, thanks so much for your help. It works like a charm :) – tampie Aug 01 '17 at 20:01

Make php generated divs same height responsive

1 Answers1