Pricing tables often have 3 columns: Basic, Pro, and Enterprise. On mobile, these become a mile-long scroll. A better approach is a slider that centers the “Popular” plan.

To solve this, use Div Render Container Slider for Elementor.

Step 1: Pricing Card Design

Design your 3 pricing tables as child Containers.
Make the “Middle” (Pro) card slightly taller or styled differently to highlight it.

Step 2: Slider Configuration

Enable Slider Mode.

  • Slides Per View:
    – Desktop: 3 (shows all).
    – Mobile: 1.2 (shows focused plan + hint of others).
  • Centered Slides: Set to Yes. This is crucial for mobile, ensuring the “Pro” plan is centered when the user lands on the section (if it’s the second slide).

Step 3: The “Scale” Effect

To really highlight the active plan on mobile:

  • Effect: Use Creative (if available) or standard Slide.
  • CSS Tweak: Add a custom CSS rule to scale the active slide:
    selector .swiper-slide-active { transform: scale(1.1); transition: transform 0.3s; }
    This makes the center pricing table pop out.

Pro Tips for Pricing

  • Initial Slide: Use the “Initial Slide” setting (if available) to start on Slide 2 (the middle plan) so users see the recommended option first.