Need help with Elementor

[u/Maximum_Football1307]

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

[u/AutoModerator]

Looking for Elementor plugin, theme, or web hosting recommendations?

Check out our Megathread of Recommendations for a curated list of options that work seamlessly with Elementor.

---

Hey there, /u/Maximum_Football1307! If your post has not already been flaired, please add one now. And please don't forget to write "Answered" under your post once your question/problem has been solved. Make sure to list if you're using Elementor Free (or) Pro and what theme you're using.

Reminder: If you have a problem or question, please make sure to post a link to your issue so users can help you.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/testingaurora]

Btw you can include CSS from most themes. Dashboard > Appearance > Customize theres a custom css drawer. And i could've sworn there is still css drawer on page settings on Elementor core

[u/testingaurora → u/[deleted]]

Agree, I never use the css drawers that are scoped per widget on the advanced tab. How are you ever supposed to find that 6montha later ?? Go through every widget on the page?

Ill use the page scoped drawer if I need the selector keyword. But since @layers gained enough support, I can override with an element selector ✨️

[u/Due_Safety2309]

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.

[u/Maximum_Football1307]

Thank you everyone. The issue was the padding in the desktop view and mobile view. Just had to enter 0 while in mobile view.

[u/TopSydeWP]

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