BugWP logo BugWP
Back to Community
Home / Community / General

Fixing Common Otter Blocks Review Block Mobile Display Issues

22 threads Sep 10, 2025

Content

Many users of the Otter Blocks plugin encounter a specific issue where the Product Review Block displays awkwardly on mobile devices. The most common complaint is that the 'Pros' and 'Cons' sections appear side-by-side in a two-column layout on smaller screens, making the text cramped and difficult to read. This guide will explain why this happens and provide the most effective solution.

Why This Mobile Display Problem Occurs

The Otter Blocks Review Block is designed with a responsive layout. However, the CSS that controls the two-column display for the 'Pros' and 'Cons' sections on desktop views doesn't always adjust optimally for narrower mobile screens. This is not necessarily a bug, but a design choice that can sometimes conflict with specific themes or content lengths, leading to a poor user experience on phones.

The Most Common Solution: Custom CSS

The most reliable fix, as confirmed by multiple user reports, is to add a small snippet of custom CSS. This code will force the 'Pros' and 'Cons' sections to stack vertically on top of each other on screens smaller than 600px, which is a standard breakpoint for mobile devices.

Here is the CSS code that has successfully resolved this issue for numerous users:

@media(max-width:600px) {
    .wp-block-themeisle-blocks-review .wp-block-themeisle-blocks-review__right {
        display: block !important;
    }
}

How to Apply This Fix

  1. From your WordPress dashboard, navigate to Appearance > Customize.
  2. Click on the Additional CSS section.
  3. Paste the entire CSS code snippet provided above into the text area.
  4. Publish your changes.

After saving, clear any caching plugins you might be using and check your site on a mobile device or by resizing your browser window. The 'Cons' section should now appear below the 'Pros' section, creating a single, easy-to-read column.

Other Related Mobile Customizations

Based on community discussions, this same method of adding custom CSS can be used to address other mobile styling concerns with the Review Block, such as:

  • Adjusting font sizes for better readability.
  • Changing the alignment of text.

While the 'Otter Blocks – Gutenberg Blocks, Page Builder for Gutenberg Editor & FSE' team has been made aware of this layout preference through user feedback, implementing this CSS fix is currently the best way to achieve the desired mobile layout.

Related Support Threads Support