Back to Community
Home / Community / Theme → Hestia

How to Adjust Column Layouts in the Hestia Theme's Contact Section

22 threads Sep 9, 2025 Theme → Hestia

Content

Many Hestia theme users want to customize the layout of the Contact section on their homepage. A common request is to remove the contact form entirely and have the contact information expand to fill the full width of the section, creating a single-column layout. This guide will explain why this happens and provide the most effective CSS solution.

Why This Layout Issue Occurs

The Hestia theme's frontpage sections, including the Contact section, are built with a predefined structure. The Contact section uses a two-column Bootstrap grid layout by default. The left column (`.col-md-5`) is designated for your contact information, while the right column (another `.col-md-5`) is for the contact form. Because both columns share the same class, applying a width change to one affects the other. This default design means that simply hiding the form does not automatically allow the information column to expand.

Step-by-Step Solution

Follow these steps to remove the contact form and create a single, full-width column for your contact info.

  1. Remove the Contact Form: Navigate to Appearance → Customize → Frontpage Sections → Contact. Find the field for the contact form shortcode and ensure it is completely empty. This will prevent the form from being generated.
  2. Add Custom CSS: To adjust the column width, you need to add custom CSS. Go to Appearance → Customize → Additional CSS.
  3. Paste the CSS Code: Copy and paste the following code snippet into the Additional CSS box. This code specifically targets the contact section on larger screens and adjusts the column widths.

    @media (min-width: 992px) {
        .hestia-contact .col-md-5 {
            width: 100% !important;
        }
    }

    Note: Using !important and scoping the CSS with .hestia-contact ensures these changes only affect the Contact section and override the default theme styles.
  4. Publish Your Changes: Click the 'Publish' button to save and apply your changes.

Troubleshooting and Advanced Adjustments

  • Clearing Cache: If you don't see the changes immediately, clear your browser cache and any caching plugins you have active on your site.
  • Different Width Ratios: If you want to keep the form but change the column ratio (e.g., 25% for info, 75% for the form), you would need a more complex CSS solution that targets each column individually using more specific selectors, which often requires inspecting the page elements with your browser's developer tools.
  • General Principle: For modifying other sections of the Hestia theme, the process is similar. You will need to use your browser's inspector tool to identify the correct CSS classes and then write targeted rules in the Additional CSS section.

By following this guide, you can effectively customize the Contact section to better fit your website's design without the need for additional plugins.

Related Support Threads Support