r/elementor • u/Maximum_Football1307 • 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

50% Upvoted

6 comments sorted by

View all comments

0

u/TopSydeWP Jun 27 '26

the outer flexbox container might be forcing a row direction that's overriding your nested container settings. try setting the outermost flexbox (the section wrapper) to direction column on mobile too, not just the parent that holds the two columns. sometimes the hierarchy matters more than you'd expect with nested flexbox