BugWP logo BugWP
Back to Community
Home / Community / Theme → Hestia

Fixing Mobile Responsiveness Issues in Hestia: A Troubleshooting Guide

20 threads Sep 16, 2025 Theme → Hestia

Content

Many Hestia users encounter challenges with how their website appears on mobile devices. Images might be cropped, product layouts can look too small or narrow, and elements may not resize as expected. This guide covers the most common mobile responsiveness issues and how to address them.

Common Mobile Responsiveness Issues

Based on community reports, the most frequent problems include:

  • Slider or Big Title section background images being cropped or too large on mobile.
  • WooCommerce product boxes appearing too narrow or having inconsistent heights.
  • Product images loading in their original, uncropped size on mobile.
  • Layouts in the WordPress Customizer looking different from the live mobile site.
  • Header or menu elements causing horizontal scrolling or covering content.

Why These Issues Happen

These problems typically occur because:

  • Theme and Plugin Interplay: Hestia's default styles can interact unexpectedly with other plugins, especially page builders like Elementor or WooCommerce.
  • CSS Media Queries: The CSS rules that control how a site looks on different screen sizes (media queries) may need adjustment for a specific site's content.
  • Image Sizes: WordPress generates multiple image sizes. Sometimes, the wrong image size is served on mobile devices.
  • Browser Caching: Old CSS or JavaScript files might be cached, causing the site to display outdated styling.

General Troubleshooting Steps

  1. Clear All Caches: Before making any changes, clear your browser cache, any WordPress caching plugins, and your Content Delivery Network (CDN) cache if you use one.
  2. Conflict Test: Temporarily deactivate all plugins except WooCommerce (if it's essential to the issue). If the problem resolves, reactivate your plugins one by one to identify the culprit.
  3. Check for Updates: Ensure Hestia, all plugins, and WordPress itself are updated to their latest versions.

Specific Solutions

1. Fixing Cropped or Oversized Background Images on Mobile

A common issue is the Big Title section or slider background image not scaling correctly on smaller screens. The Hestia team has official documentation on this. The solution typically involves adding a CSS media query to control the image's size.

Example Code Snippet:

@media only screen and (max-width: 768px) {
    .header-filter {
        background-size: cover !important; /* or contain */
        background-position: center center !important;
    }
}

You can adjust the max-width value (768px targets tablets and below) and the background-size property (cover, contain, or specific dimensions) to achieve the desired look. Add this code in Appearance > Customize > Additional CSS.

2. Adjusting WooCommerce Product Layouts on Mobile

If your shop page products appear too narrow, too small, or in a single column on mobile, CSS can help. The following code can force a two-column layout on mobile devices.

Example Code Snippet:

@media only screen and (max-width: 768px) {
    .woocommerce ul.products[class*=columns-] li.product,
    .woocommerce-page ul.products[class*=columns-] li.product {
        width: 48% !important;
        float: left !important;
        margin: 0 4% 4% 0 !important;
    }
    .woocommerce ul.products[class*=columns-] li.product:nth-child(2n),
    .woocommerce-page ul.products[class*=columns-] li.product:nth-child(2n) {
        margin-right: 0 !important;
        float: right !important;
    }
}

This code makes product boxes take up 48% of the width, creating a two-column grid. The margins are adjusted to add space between them. Add this to the Additional CSS section.

3. Fixing Equal Height Product Boxes

When product titles have different lengths, it can create boxes of uneven height. This requires a JavaScript solution to calculate the height of the tallest box and apply it to all others. A common approach is referenced in this Stack Overflow thread.

4. Correcting Header Width and Horizontal Scrolling

If your mobile site has a lateral shift or allows zooming out, indicating a width overflow, try this CSS fix mentioned in the forums.

Example Code Snippet:

.navbar.navbox-default.navbox-fixed-top .container {
    padding-left: 0px;
    padding-right: 0px;
}

When to Seek Further Help

If these solutions don't resolve your issue, the community can often provide better assistance if you can share:

  • The URL of the page where the problem occurs.
  • A clear screenshot of the issue.
  • A screenshot of any relevant Customizer settings you are using.

Remember, custom CSS and JavaScript solutions are highly specific to a site's individual setup and may require some tweaking to work perfectly for you.

Related Support Threads Support