September 19, 2023

Fix the Elementor Container Gap Issue after 3.16 Update

Play Video

Elementor’s 3.16 update has caused a bit of a stir within the user community with their Elementor container gap issue. If you’ve recently updated to version 3.16, you might have noticed some unexpected changes in your website’s spacing. This is due to a modification in the row and column gap spacing. But don’t fret! This guide will walk you through the solution, ensuring your website looks as polished as ever.


Understanding the Elementor Container Gap Issue

With the 3.16 update, Elementor introduced a change in the row and column gap spacing. This alteration provides users with more flexibility in designing their layouts. However, if you’re unfamiliar with this update, it can seem a bit daunting.

For instance, if you had previously set your website using Flexbox containers, you would have noticed a default 20-pixel gap. This gap can be adjusted to your liking. However, with the 3.16 update, many users found their content squished together, causing understandable confusion.


How to Address the Gap Issue

  1. Inspect the Container Gap
    Navigate to a container on your website. By default, there might be a 20-pixel gap. If you set this to zero, all content within that container will be pushed together. To revert to the default, simply remove the zero.
  2. Set the Gap Manually
    For a quick fix, go into each container and manually set the gap. You can input a specific value or link them to ensure uniformity.
  3. Use Site Settings for a Global Fix
    Click on the hamburger menu.
    • Navigate to 'Site Settings'.
    • Go to 'Layout'.
    • Ensure the gap is set to 20×20. If not, input these values and link them.
  4. Adding New Containers
    If you add a new container after setting the global gap, it will default to the site setting. However, you can always adjust this manually for each container.

Why Not to Roll Back

Rolling back to a previous version might seem like a tempting solution, but it’s unnecessary. The gap issue is straightforward to address once you understand the cause. By following the steps above, you can quickly rectify the problem without reverting to an older version.


Conclusion

The Elementor 3.16 update, while initially causing some confusion, is a testament to Elementor’s commitment to providing users with more flexibility and control over their designs. By understanding the changes and knowing how to adjust settings, you can continue to create stunning websites with ease. Remember, every update is an opportunity to learn and adapt, ensuring your web design skills remain sharp and up-to-date.

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Visit
Fix the Elementor Container Gap Issue after 3.16 Update
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Menu
Give Feedback
Describe your feedback *
Rate Helwp
Share
Facebook
Twitter
LinkedIn
Reddit
Email
WhatsApp
Telegram
Pocket
Report
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.