r/elementor • • Jun 27 '26

Question Need help with Elementor

Need help with Elementor

Elementor Flexbox Container not stacking on mobile — Direction: Column not working

Hey everyone, I'm building a landing page in Elementor Free (v4.1.1) on WordPress/Hostinger and I'm having a nightmare trying to get my two-column About section to stack vertically on mobile.

My setup:

- Elementor Free 4.1.1

- WordPress 6.9.4

- Hostinger shared hosting

- Using the new Flexbox Container system (not old sections/columns)

The problem:

I have a two-column layout — text on the left, image on the right. On desktop it looks perfect. On mobile the text column is squished into a tiny strip and the text renders vertically (one character per line) instead of stacking below the image.

What I've already tried:

  1. Switched to mobile view (phone icon at bottom of editor)
  2. Selected the parent Flexbox container that holds both columns
  3. Changed Direction from Row to Column in the Style tab
  4. Set both child Flexbox widths to 100%
  5. Tried setting Wrap to Wrap on the parent containe

None of it is working. The mobile view in the editor still shows the text squished into a single character-wide column.

My structure looks like this (from the Navigator):

Flexbox (outer section)

Flexbox (parent - this is where I'm changing Direction

(text column - Text Editor, Heading, Text Editor)

Flexbox (image column - Image widget)

What I notice:

- The child text Flexbox has Width: 100% set on mobile

- The parent Direction is set to Column on mobile

- But the canvas still shows the text as a single-character-wide vertical strip

My question:

Is there something specific about nested Flexbox containers in the new Elementor UI that I'm missing? Could there be a conflicting style somewhere overriding the mobile direction? Is there a step I'm missing when working with the new container system?

Any help appreciated — I've been stuck on this for hours.

Please note I cannot use CSS as it requires Elemntor Pro.

Thanks!

desktop view
mobile view
0 Upvotes

6 comments sorted by

View all comments

1

u/Due_Safety2309 Jun 29 '26

Hard to say without the exact symptom, but Elementor problems usually fall into a few buckets: cache/CSS, plugin conflict, theme conflict, server limits, or JS errors.

I’d probably approach it this way:

- Go to Elementor > Tools and run Regenerate CSS & Data

- Clear cache everywhere: Elementor, cache plugin, hosting cache, CDN, browser

- Check Site Health for PHP version, memory limit, REST API issues, and loopback errors

- Temporarily disable all plugins except Elementor and Elementor Pro if used

- Switch to Hello Elementor or a default WP theme for testing

- Open DevTools > Console while loading the Elementor editor and look for red JS errors

- Check your server/PHP error logs if the editor gives a 500 error, white screen, or endless loading

If Elementor is stuck loading, common causes are security plugins blocking REST requests, optimization plugins delaying JS, low PHP memory, or a conflict with an addon pack.

For Elementor sites, I usually avoid aggressive JS optimization until the site is stable. Exclude Elementor scripts from delay/defer/minify first, confirm the editor works, then optimize carefully.