Mobile Feedback Layout Fix

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 widget display **1 column on mobile (≤767px)** instead of 2, update the CSS in the “ section to include a responsive breakpoint.

Add this at the **end of the “ block**:

@media (max-width: 767px) {
    .feedback-slide-group {
        flex-direction: column;
        gap: 20px;
        position: relative; /* override absolute for stacking */
    }

    .feedback-box {
        width: 100%;
    }

    .feedback-pagination {
        position: static;
        transform: none;
        margin-top: 20px;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
    }

    .feedback-pagination::before,
    .feedback-pagination::after {
        display: none;
    }
}

### Why this works:
– It overrides the horizontal flex layout and makes it vertical on small screens.
– Also repositions pagination to fit mobile layout.
– Keeps everything clean and stackable.

Let me know if you also want to enable swipe support for mobile.

User

but dot will show at right side and slide will work nomally also just display one column in at a time

Assistant

To show **1 column at a time on mobile**, but keep:
– **slider logic the same** (not stacked),
– **pagination (dots) still on the right side**,
you only need to tweak layout so that each `.feedback-slide-group` holds just **1 `.feedback-box` per view** on mobile.

Here’s how you update it:

—

### ✅ Update the CSS (inside “ block):

Add at the end:

@media (max-width: 767px) {
    .feedback-slide-group {
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: center;
    }

    .feedback-box {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .feedback-pagination {
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        flex-direction: column;
    }

    .feedback-pagination::before,
    .feedback-pagination::after {
        display: block;
    }
}

—

### ✅ Update the PHP render logic

Modify this line:

$groups = array_chunk($settings['feedback_list'], 2);

Replace it with:

$chunk_size = wp_is_mobile() ? 1 : 2;
$groups = array_chunk($settings['feedback_list'], $chunk_size);

However, since `wp_is_mobile()` only works on the server side and doesn’t account for resizing in Elementor editor, a better approach is to **always use `array_chunk($settings['feedback_list'], 1)`** and just prepare for 1 item per slide, regardless of screen.

So best:

$groups = array_chunk($settings['feedback_list'], 1); // 1 per slide always

Then the slider will:
– show 2 columns on desktop using `flex`
– show 1 column on mobile using responsive CSS

And the pagination stays **on the right** as-is.

Let me know if you want to auto-slide or swipe on mobile too.

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;
        }
        @media (max-width: 767px) {
    .feedback-slide-group {
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: center;
    }

    .feedback-box {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .feedback-pagination {
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        flex-direction: column;
    }

    .feedback-pagination::before,
    .feedback-pagination::after {
        display: block;
    }
}
</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 **fix the desktop layout** to show **2 columns**, and **1 column only on mobile (≤767px)** — your current logic has conflicting code:

You’re using:

$groups = array_chunk($settings['feedback_list'], 2);
$chunk_size = wp_is_mobile() ? 1 : 2;
$groups = array_chunk($settings['feedback_list'], $chunk_size);

That logic **only works server-side**, and `wp_is_mobile()` doesn’t detect responsive resizing in Elementor or browser resizing.

—

### ✅ Solution (Clean and Fully Responsive):

1. **Always chunk into pairs for desktop layout:**

$groups = array_chunk($settings['feedback_list'], 2);

(So, remove `wp_is_mobile()` entirely.)

2. **Let CSS handle the layout switch at mobile**:
Keep your current CSS block:

@media (max-width: 767px) {
       .feedback-slide-group {
           flex-wrap: nowrap;
           flex-direction: row;
           justify-content: center;
       }

       .feedback-box {
           flex: 0 0 100%;
           max-width: 100%;
       }

       .feedback-pagination {
           right: 20px;
           top: 50%;
           transform: translateY(-50%);
           flex-direction: column;
       }

       .feedback-pagination::before,
       .feedback-pagination::after {
           display: block;
       }
   }

So now:
– Desktop = 2 feedbacks per slide
– Mobile = CSS shows only one box per slide (`flex: 0 0 100%` makes second one overflow/invisible)

—

### ✅ Optional: Improve mobile behavior

To **actually slide only 1 feedback at a time on mobile**, you could add JavaScript logic to detect viewport width and display only the first `.feedback-box` in each `.feedback-slide-group`.

But if you're happy just visually showing 1 column via CSS and letting the second box overflow hidden (or ignored), no extra JS is needed.

Let me know if you want full **JS enhancement to fully hide second item** on mobile.

Mobile Feedback Layout Fix

Leave a Comment Cancel