Hello,
I’m currently building my homepage using Elementor and I’m trying to display a list of product categories. I’m using the Nested Carousel widget with images and links.
My goal is:
On mobile devices, I want the categories to be shown as a carousel, with 1.3 slides per view, so users know they can swipe.
On desktop, I would like the categories to be displayed in a grid layout, because I have over a dozen categories. If I display them in a carousel on desktop, the images become too small and hard to read.
I also tried using the Product Categories widget (the one with the X icon). It allows switching between grid and carousel layout, but when I change it to carousel on mobile, it also changes to carousel on desktop, and vice versa — it seems it cannot set different layouts per device.
Is there any way to achieve my goal?
Can I use custom CSS to force grid layout on desktop and carousel on mobile? Or is there a better method you’d recommend to display this section responsively?
I’m aware that using separate widgets for different devices (e.g., one for desktop and another for mobile, hidden via responsive settings) is a possible workaround. However, I would prefer not to use this method, as hidden widgets are still loaded in the background, which could negatively affect site performance and page speed.
Ideally, I would like to use a single widget that adapts its layout based on device type using custom CSS or built-in settings.
Thank you very much for your help!Thank you very much in advance for your assistance.
Wishing you a wonderful day and continued success with your great theme!
.
