Troubleshooting Common Image and Responsive Display Issues in the Kadence Info Box Block

Users of the Gutenberg Blocks with AI by Kadence WP plugin often leverage the Info Box block to create stylish content sections. However, a recurring theme in community support is encountering issues with images and responsive behavior within these blocks. This guide compiles the most common problems and their solutions, based on community troubleshooting threads.

Common Issues and Their Solutions

1. Images Not Responsive on Mobile

The Problem: An image inside an Info Box does not resize correctly on mobile devices, remaining at its desktop size.

Why It Happens: This can occur due to a missing CSS rule that ensures the image scales with its container. Some themes might not provide the necessary base styles for this specific block.

The Solution: The Kadence WP team has identified that the following CSS is often missing and should be added to your site's additional CSS panel (Appearance > Customize > Additional CSS):

.kt-blocks-info-box-media-align-top .kt-blocks-info-box-media {
  max-width: 100%;
}

Additionally, always check the block's settings. There are often dedicated controls for image size on mobile viewports. Ensure these are configured appropriately for your design.

2. Image and Text Layout Breaks on Mobile

The Problem: An Info Box with an image on the left and text on the right does not stack nicely on mobile. The text may not center or could overflow.

Why It Happens: This is typically a layout bug specific to the "image left" alignment within the block.

The Solution: A temporary CSS fix is often required. The Kadence WP team has provided workaround code for this specific scenario in past threads. For a proper long-term fix, ensure your plugin is updated to the latest version, as these bugs are frequently patched in updates.

3. ALT Text is Stripped from Images

The Problem: ALT text added to an image in the media library is not output in the frontend HTML when that image is used inside an Info Box.

Why It Happens: This is a bug where the block was not correctly pulling and displaying the ALT attribute from the media library.

The Solution: This issue has been addressed by the Kadence WP team in a plugin update. If you are experiencing this, the first step is to update the 'Gutenberg Blocks with AI by Kadence WP' plugin to the most recent version. This resolves the ADA compliance and SEO concern.

4. Display Differences Between Editor and Frontend

The Problem: An image appears correctly within the Gutenberg editor but is not displayed properly on the live frontend site (e.g., incorrect height).

Why It Happens: This discrepancy can be caused by a theme lacking default responsive image CSS that the block's styling depends on.

The Solution: The Kadence WP team has released updates to add robust CSS that ensures consistent image display across all themes. Updating the plugin is the primary solution for this issue.

5. Browser-Specific Bugs (Firefox, IE11)

The Problem: Certain features, like icon hover animations (e.g., flip) or image aspect ratios, work in Chrome but break in browsers like Firefox or Internet Explorer 11.

Why It Happens: Different browsers can interpret CSS rules slightly differently, leading to these inconsistencies.

The Solution:

• For Firefox hover issues: Specific CSS fixes are often pushed in plugin updates to address rendering differences.
• For IE11 image skewing: This is commonly related to a conflict with the 'max-width' CSS property set on the image. Try editing the Info Box and adjusting the image's maximum width setting to a specific pixel value (e.g., 300px) to see if it resolves the rendering issue.

General Troubleshooting Tips

• Update First: Always ensure your WordPress core, theme, and all plugins (especially the Kadence Blocks plugin) are updated to their latest versions. Many reported bugs are fixed in subsequent updates.
• Clear Caches: After making changes or updating, clear any site, browser, or CDN caches to ensure you are viewing the most recent version of your site.
• Check Settings: Thoroughly explore all settings tabs within the Info Box block. Responsive controls for mobile and tablet are often found in dedicated settings sections.
• Provide a Link: When seeking help from the community, providing a direct link to the page with the issue is the fastest way for others to diagnose the problem by inspecting the front-end code.

By following these steps, most common issues with the Kadence Info Box block can be identified and resolved efficiently.