In the review slider, texts cannot fully displayed on mobile devices

  • Resolved vega

    (@customprecious)


    4 months, 3 weeks ago

    Hi,

    We are experiencing layout issues with the Customer Reviews for WooCommerce plugin on mobile devices, specifically in the review slider (Customer Images layout).

    On desktop, everything displays correctly. On mobile, we are noticing two main problems:

    1. Text cannot fully display even with internal scrollbar:
      When a review is very long, it is placed inside a scrollable container. However, even with the scrollbar, some of the content is still not visible or effectively clipped.
    2. Text alignment / width issue on mobile:
      The review text is squeezed to the left side and does not expand to fill the available horizontal space next to or beneath the image. As a result, the text appears narrow, overly tall, and visually unbalanced.

    Here is the picture showing the issues.

    https://imgur.com/a/4X7U47f

    Can you help!

    Thanks in advance!

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Support pear8398

    (@pear8398)

    4 months, 3 weeks ago

    Hi,

    Thanks for using CusRev.

    On the product page, I see you are using the all reviews shortcode instead of the slider shortcode. If the review content is too long and causes some issues, you can use the max_chars attribute to limit the number of characters of the review content to display.
    Please go to Reviews > Settings > Shortcodes tab, to get more details.

    Thread Starter vega

    (@customprecious)

    4 months, 3 weeks ago

    Hello, I added the max_chars attribute to the code, but it doesn’t seem to be the issue. There’s a screen recording in the link you can check. What I mean is that on desktop devices, scrolling down the scrollbar shows the full content of a single review, but on mobile devices, scrolling down does not display the full content.

    https://www.loom.com/share/75ab8eb372c34729a13a4ba30e480b14

    I inserted this review code using a code block; below is the full code:

    [cusrev_all_reviews sort=”DESC” sort_by=”date” per_page=”10″ show_summary_bar=”true” show_media=”true” show_products=”false” categories=”” product_tags=”” tags=”” products=”current” product_reviews=”true” shop_reviews=”false” inactive_products=”false” show_replies=”true” show_more=”5″ min_chars=”0″ max_chars=”200″

    avatars=”initials” users=”all” add_review=”false”]

    Thanks!

    Plugin Support pear8398

    (@pear8398)

    4 months, 3 weeks ago

    Hi,

    Thanks for your additional information.

    You can try to use this custom CSS code to show the full width for the review content when viewing the image slider

    
@media(max-width: 767px) {
    .cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-main .cr-ajax-reviews-slide-main-comment, 
    .cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-main .cr-ajax-reviews-slide-main-comment {
        width: 100%;
    }   
}

    Let me know how it goes.

    Thread Starter vega

    (@customprecious)

    4 months, 3 weeks ago

    Hi Pear,

    Thank you for providing the code. However, the reviews are still not displaying completely. I tried removing the max_chars attribute, but the issue remains the same. I also noticed that on mobile devices, the scrollbar is no longer visible.

    https://imgur.com/a/nK8zrEf

    Additionally, I would like to ask: could this be caused by my website’s own configuration? Is it possible that there is a conflict between your plugin and my theme or another plugin, which is causing this issue?

    Plugin Support pear8398

    (@pear8398)

    4 months, 3 weeks ago

    Hi,

    The max_chars attribute is not supported for the [cusrev_all_reviews] shortcode. It is available when you use the slider shortcode [cusrev_reviews_slider]. You can read more about shortcode attributes on the settings page Reviews > Settings > Shortcodes tab.

    Yes, the issue with the scrollbar on the mobile view could be affected by the theme style or a third-party plugin. You can try to deactivate all plugins except CusRev, WooCommerce, switch to a WordPress theme and recheck the issue.

    Thread Starter vega

    (@customprecious)

    4 months, 2 weeks ago

    Hello,

    Thanks for your reply. I would like to know how the images are displayed in the All Reviews shortcode on mobile devices.

    Will the content be aligned to the left as a whole, with the overflow area having a scrollbar, so that when you scroll, all the content can be fully displayed?

    Rather than the way it is showing now, where the content is not fully visible.

    Plugin Support pear8398

    (@pear8398)

    4 months, 2 weeks ago

    Hi,

    The review content in the slider popup is displayed on the left due to the width of the container. You can use the custom CSS code above to display it in full-width of the container.

    Another thing, you can try to use this CSS code to make the whole slider popup scrollable on the mobile view

    
@media(max-width: 767px) {
    #reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal, 
    .cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal {
        overflow-y: scroll
    }
}
    Thread Starter vega

    (@customprecious)

    4 months, 1 week ago

    Thanks so much, it shows correctly now. Will I still need to remove these codes after future updates?

    Plugin Support pear8398

    (@pear8398)

    4 months, 1 week ago

    Hi,

    I will forward this topic to the development team to include the scrollable CSS code in future updates. In the meantime, you can still keep the CSS code on your site to make it work.

    Thread Starter vega

    (@customprecious)

    4 months, 1 week ago

    Thanks so much, Pear! If this gets added in a future update, will it be mentioned in the update notes?

Viewing 10 replies - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.