Fixed Height CSS Layout

May 6, 2025 · AI Conversations

User

<style>
.feedback-slider-track {
            position: relative;
            height: auto;
        }

        .feedback-section .elementor-widget {
            position: unset !important;
        }

        .feedback-slide-group {
            display: flex;
            gap: 30px;
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .feedback-box {
            flex: 1;
            background: #fff;
            padding: 30px 30px 0 30px;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-sizing: border-box;
        }

        .feedback-user {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .feedback-user-img {
            width: 56px;
            height: 56px !important;
            border-radius: 50% !important;
            margin-right: 10px;
            border: 2px solid #E9204F !important;
        }

        .feedback-pagination {
            position: absolute;
            right: 105px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 32px;
        }

        .feedback-pagination::before,
        .feedback-pagination::after {
            content: '';
            display: block;
            width: 1px;
            height: 85px;
            background-color: #fff;
            opacity: 0.5;
        }

        .feedback-pagination .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            position: relative;
            z-index: 1;
        }

        .feedback-pagination .dot.active {
            background: #fff;
            border: 2px solid #fff;
            box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff;
        }

        .feedback-slide-group.active {
            opacity: 1;
            position: relative;
        }

        .user-inner-box {
            display: flex;
            align-items: center;
        }

        .user-inner-text {
            display: flex;
            flex-direction: column;
        }

        .user-name {
            font-size: 18px;
            font-weight: 600;
            color: #000;
        }

        .feedback-text,
        span.user-title {
            color: #444;
        }
</style>

<script>
jQuery(document).ready(function ($) {
            var $groups = $('.feedback-slide-group');
            var current = 0;

            function showSlide(index) {
                $groups.removeClass('active').eq(index).addClass('active');
                $('.feedback-pagination .dot').removeClass('active').eq(index).addClass('active');
            }

            $('.feedback-pagination .dot').click(function () {
                var index = $(this).data('index');
                current = index;
                showSlide(index);
            });

            showSlide(0); // Initialize

            // ✅ Equal height logic
            function equalizeHeights() {
                var maxGroupHeight = 0;

                $groups.each(function () {
                    var $boxes = $(this).find('.feedback-box');
                    var maxBoxHeight = 0;

                    $boxes.css('height', 'auto'); // reset first

                    $boxes.each(function () {
                        var h = $(this).outerHeight();
                        if (h > maxBoxHeight) maxBoxHeight = h;
                    });

                    $boxes.css('height', maxBoxHeight + 'px');
                    $(this).css('height', maxBoxHeight + 40 + 'px'); // group height + padding
                    if (maxBoxHeight + 40 > maxGroupHeight) maxGroupHeight = maxBoxHeight + 40;
                });

                // Apply same height to all groups
                $groups.css('height', maxGroupHeight + 'px');
            }

            equalizeHeights();

            $(window).on('resize', function () {
                equalizeHeights();
            });
        });
</script>

Assistant

To **make the feedback boxes (`.feedback-box`) and the group container (`.feedback-slide-group`) have a fixed height across screen sizes without relying on JavaScript**, you can switch to using **CSS Flexbox or Grid** with a consistent height using `min-height`, `max-height`, or fixed `height`.

Here’s how you can **update the CSS** to achieve a fixed height layout using just CSS (remove the JS `equalizeHeights()` function and related logic):

### ✅ Replace the relevant CSS section with:

.feedback-slider-track {
    position: relative;
}

.feedback-slide-group {
    display: flex;
    gap: 30px;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    height: 420px; /* Set fixed height here */
    align-items: stretch; /* Ensures children stretch full height */
}

.feedback-box {
    flex: 1;
    background: #fff;
    padding: 30px 30px 0 30px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Make it fill group height */
    box-sizing: border-box;
}

### ✅ Optional: Make it responsive with `min-height`/`max-height`:

.feedback-slide-group {
    height: auto;
    min-height: 360px;
    max-height: 460px;
}
.feedback-box {
    height: 100%;
}

### ✅ Remove this JS block:

// ✅ Equal height logic
function equalizeHeights() {
   ...
}
equalizeHeights();
$(window).on('resize', function () {
    equalizeHeights();
});

—

This ensures:
– Consistent box height across slides and devices.
– No JS dependency.
– Better layout performance and simpler code.

Would you like me to also update the full code with these changes?

User

where to put this
.feedback-slide-group {
height: auto;
min-height: 360px;
max-height: 460px;
}
.feedback-box {
height: 100%;
}

Assistant

You should place that CSS **inside the “ block** already defined in your `render()` function — specifically, after or replacing the existing `.feedback-slide-group` and `.feedback-box` rules.

### ✅ Here’s how to insert it correctly:

**Find this block in your code:**

<style>
.feedback-slider-track {
    ...
}

.feedback-slide-group {
    display: flex;
    gap: 30px;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.feedback-box {
    flex: 1;
    background: #fff;
    padding: 30px 30px 0 30px;
    ...
}

### ✅ Replace `.feedback-slide-group` and `.feedback-box` styles with:

.feedback-slide-group {
    display: flex;
    gap: 30px;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    height: auto;
    min-height: 360px;
    max-height: 460px;
    align-items: stretch;
}

.feedback-box {
    flex: 1;
    background: #fff;
    padding: 30px 30px 0 30px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
}

### ✅ Then, remove this entire JS part:

// ✅ Equal height logic
function equalizeHeights() { ... }
equalizeHeights();
$(window).on('resize', function () {
    equalizeHeights();
});

Let me know if you want full updated PHP code with all these changes integrated.

Fixed Height CSS Layout

Leave a Comment Cancel