Back to Community
Home / Community / Core → Everything else wordpress

How to Fix Responsive Image and Layout Issues in WordPress After the 6.7 Update

22 threads Sep 16, 2025 Core → Everything else wordpress

Content

Many WordPress users have encountered unexpected responsive behavior, particularly with images and layout elements, following the WordPress 6.7 core update. A common symptom is images not fitting their containers correctly on mobile views, often due to a new automated sizes="auto, ..." attribute. This guide explains why this happens and provides the most effective solutions to restore your site's mobile responsiveness.

Why This Problem Occurs

WordPress 6.7 introduced changes to how the platform handles responsive images. The new sizes="auto, ..." attribute is designed to automatically calculate the best image size for a user's viewport. However, this can sometimes conflict with existing theme styles or custom CSS, causing images to display incorrectly on mobile devices or other breakpoints. This is not a bug in a specific theme or plugin but a change in core WordPress behavior that can have different effects depending on your site's setup.

Common Solutions

1. Remove the Auto Sizes Attribute with Code

The most direct solution is to filter the image output and remove the problematic sizes="auto, ..." attribute. You can add the following code to your child theme's functions.php file.

add_filter(
    'wp_content_img_tag',
    static function ( $image ) {
        return str_replace( ' sizes="auto, ', ' sizes="', $image );
    }
);

Important: Always use a child theme when adding custom code to avoid losing your changes during theme updates. Test this on a staging site first.

2. Use Custom CSS with Media Queries

For other responsive issues, like misaligned headers, footers, or text on mobile, targeted CSS is often the answer. The core issue is usually that native responsive editing in the block editor (Gutenberg) is still on the roadmap, so custom CSS is currently required.

For example, to left-align text only on mobile, you could use:

@media (max-width: 768px) {
    .your-content-class {
        text-align: left !important;
    }
}

You can add this type of code in the WordPress Customizer under Additional CSS.

3. Check Your Theme and Plugins

As seen in many support threads, responsive problems are frequently theme-dependent. If the solutions above do not work, the issue might be specific to your theme's implementation.

  • Test with a Default Theme: Temporarily switch to a default theme like Twenty Twenty-Five to see if the problem persists. If it resolves, you know the issue lies with your primary theme.
  • Contact Theme Support: If the problem is theme-specific, the best course of action is to seek help from your theme's official support channels. They are most familiar with their product's code and can provide a targeted fix.
  • Check for Plugin Conflicts: Temporarily deactivate all plugins to see if the issue is resolved. If it is, reactivate them one by one to identify the culprit.

When to Seek Further Help

If your site uses a commercial theme (e.g., Avada, Ashe Pro) or a page builder plugin (e.g., Elementor), and the problem is isolated to their functionality, your most effective path is to contact their dedicated support teams. They have the specific knowledge required to address issues within their products.

By understanding the root cause of these responsive issues and methodically applying these solutions, you can ensure your WordPress site looks great on all devices.

Related Support Threads Support