One of the most common web design patterns is the “Desktop Grid / Mobile Slider”. On a large screen, you want to show all 4 features at once. On a phone, those 4 columns stack into a long, boring tower. Turning them into a horizontal slider on mobile improves user experience significantly.

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

Step 1: The Desktop Setup

Create your parent Container with 4 child items.
Enable Slider Mode.
Set Slides Per View (Desktop icon) to 4.
Now, on desktop, it looks exactly like a static grid because all items are visible at once.

Step 2: The Mobile Transformation

Click the Responsive icon next to Slides Per View and select Mobile.
Set Slides Per View to 1.2.
Now, on mobile, the items align horizontally. The 0.2 shows a peek of the next slide, inviting the user to swipe.

Pro Tips for Responsive Grids

  • Gap: Ensure Space Between is set to something reasonable (e.g., 20px) so the items don’t touch.
  • Touch: Mobile users instinctively swipe. You don’t need arrows on mobile; dots or just the “peeking” effect are usually enough.