WPFIX STACK — home
Elementor Fixes

Elementor Slider Not Working on Mobile? The Flexbox Container Fix

Elementor slider or carousel broken only on mobile? It's likely still built on the old Section structure — here's how to convert it to a Flexbox Container.

By Published Updated 6 min read

Close-up of HTML code lines highlighting web development concepts and techniques.
Photo by Pixabay on Pexels

If an Elementor slider, carousel, or testimonial widget looks fine on desktop but breaks on mobile — slides overlapping, arrows misplaced, content cut off, or the whole widget refusing to swipe — the underlying cause in most current cases is that the widget still sits inside Elementor's older Section/Column structure instead of the newer Flexbox Container. Section-based layouts use a rigid grid model that several mobile browsers render inconsistently with slide-based widgets; migrating the affected area to a Container resolves the majority of these reports.

Symptoms

  • A slider, carousel, or testimonial-carousel widget displays correctly in the desktop browser but breaks specifically at mobile breakpoints (slides stacked oddly, arrows overlapping text, content overflowing the frame).
  • Swiping doesn't work on touch devices even though the same widget scrolls or auto-advances fine on desktop.
  • The widget looks correct in Elementor's own mobile preview mode but breaks on an actual phone.
  • The issue appeared after adding a new widget to an older page that was originally built years ago (pre-Container structure).

Likely causes, in order of how often they actually happen

  1. The widget (or the Section/Column it sits in) is still using Elementor's legacy Section structure rather than a Flexbox Container. Elementor's slide-based widgets rely on the underlying wrapper resizing predictably at each breakpoint; the older Section/Column/Widget model handles this less reliably on mobile than the newer Container model, especially for anything with horizontal movement like slides.
  2. Column width or padding set in pixels rather than responsive units, which doesn't recalculate properly at narrow viewports and forces the slider's frame to a fixed width that clips content.
  3. A theme or another plugin's own CSS is constraining the wrapping element's width or overflow property, fighting with the slider's own JavaScript-driven sizing (less common than the above two, but worth checking if converting to a Container doesn't fully resolve it).

Fix it: lowest-risk steps first

Step 1 — Confirm the widget is still on the old Section structure

Open the page in the Elementor editor and check the structure using the Navigator panel (the icon in the bottom-left of the editor, or keyboard shortcut Ctrl/Cmd+I). Look at what wraps the slider widget:

  • If you see Section → Column → Widget in the layer hierarchy, it's on the old structure.
  • If you see Container → Widget (with no separate Column layer), it's already on the newer structure — in that case, skip to Step 3, since the fix here won't apply.

Step 2 — Enable the Container experiment and convert the Section to a Container

  1. Go to Elementor → Editor → Settings and open the Features tab (Elementor's guide (opens in a new tab)). Older versions show the same list under Elementor → Settings → Experiments.
  2. Confirm Flexbox Container is set to Active. Since Elementor 3.16 it is active by default on new sites (opens in a new tab); a site created before that may still have it off (older versions listed it as Beta) — activate it if it isn't already.
  3. Back in the page editor, hover over the Section containing the slider, click its Edit Section icon, expand Layout and click Convert (Elementor's guide (opens in a new tab)). The converter adds a Container copy of the Section, with the widgets inside it; check the copy, then delete the original Section. Conversion is one-way — a Container can't be turned back into sections and columns — so keep the duplicate you made before starting.
  4. After conversion, switch to the mobile preview and check the slider's layout. Adjust the Container's Flex settings (direction, wrap, alignment) under the Layout tab if the slides need repositioning — this is normal after a structural conversion and is a one-time adjustment.
  5. Save the page and clear Elementor's generated files (Elementor → Editor → Home, then Tools → Clear Files & Data (Elementor's guide (opens in a new tab))) so the new markup takes effect on the live site, not just in the editor.

Step 3 — Check for pixel-based width/padding forcing a fixed frame

If the widget was already inside a Container (or after converting in Step 2) and mobile issues remain:

  1. Select the Container or Column wrapping the slider and check Layout → Width under both the desktop and mobile tabs (use the responsive mode icon next to each control to switch breakpoints).
  2. Replace any fixed pixel width with % or leave it on Auto/Fit content, so the wrapper can shrink to the actual mobile viewport instead of staying locked to a desktop-sized value.
  3. Check Advanced → Padding the same way — large fixed pixel padding on narrow screens is a frequent cause of a slider frame appearing clipped or pushed off-screen.

Step 4 — Rule out a theme/plugin CSS conflict (only if Steps 1–3 didn't fully resolve it)

Use your browser's DevTools (right-click the broken slider on the live mobile-emulated page → Inspect) and look for a competing overflow: hidden or fixed width/max-width rule on a parent element that isn't part of Elementor's own markup — this points to theme or plugin CSS overriding the container. If found, that specific rule needs a matching override in your theme's custom CSS, or you can exclude that page from the plugin/theme feature that's applying it (check the plugin's own settings for a per-page or per-template exclusion).

Verify the fix

  1. Open the page in an actual mobile browser (not just DevTools emulation) and confirm slides display fully and swipe correctly.
  2. Test at two or three different phone widths if possible (a small older phone and a larger current one) since some pixel-based issues only reappear at the narrowest breakpoints.
  3. Re-check the desktop version to confirm the Container conversion didn't shift the desktop layout.

If you need to roll back

The converter adds the Container as a copy next to the original Section, so if the result is worse and you haven't deleted the original yet, delete the Container and keep the Section. If you already deleted the original and saved, open History → Revisions in the editor and restore the revision saved before the conversion. If you exported a template copy in Step 2 as a backup, you can also re-import that original version via Templates → Import Templates and rebuild the change from there.

FAQ

Do I need to convert my entire site to Containers to fix one broken slider?

No. Elementor's converter works one Section at a time, so you can migrate just the Section holding the problematic slider without touching the rest of the page or site. A full-site migration is a separate, larger project.

Is the Flexbox Container feature safe to enable on a live site?

Yes. Containers are the default layout element on all new Elementor sites (opens in a new tab) (since Elementor 3.16), and Flexbox Container is a stable feature, not an experiment. If your installed version still labels it Beta, update Elementor first, then test the conversion on one page before rolling it out broadly.

My slider works fine on Chrome mobile but breaks on Safari/iOS — is this the same issue?

It can be. Section-based layouts have historically shown more inconsistent mobile rendering specifically on iOS Safari due to differences in how it handles legacy flex/grid fallbacks; converting to a Container often resolves cross-browser mobile differences at the same time as fixing general mobile layout, since it standardizes the underlying CSS model.

Should I just rebuild the slider from scratch instead of converting?

Converting is usually faster and preserves your existing content and styling. Rebuild from scratch only if the widget itself (not its wrapper) is outdated or deprecated — check Elementor's changelog for that specific widget if conversion alone doesn't resolve the mobile behavior.

Stefan Nistor

Founder, WP Fix Stack

Stefan runs WP Fix Stack. Every guide checks its commands, menu paths and limits against the official documentation of WordPress, PHP, the hosting panel, Cloudflare or the plugin involved, and links those sources so you can verify them. Fixes are ordered from the least risky step, each guide ends with a way to confirm the fix and roll it back, and guides are corrected, with a new Updated date, when the documentation or the software changes.

Every guide explains the symptom, likely causes, the safest order of checks and how to confirm the fix. How we check our guides.

On this page