Transform Elementor review slider into grid with custom CSS

Elementor’s current options to show reviews are limited to a slider. This is a nice option for a home or services page, but if you need a dedicated review page an isn’t a good option. To make sure you can use the same widget throughout your entire site; this tutorial transform the slider into a grid.

1. Assign custom id to review widget

To make sure the custom CSS we are going to use does not interfere with any other review widget you might use, we are going to assign a custom id to the review widget. This id wil be called ‘custom-reviews’.

2. Disable all slider settings

Disable all the slider options in the widget settings.

3. Add custom CSS to the widget

Add the following custom CSS to the widget.

				
					#custom-reviews .swiper-wrapper {
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row;
    transform: none !important; 
    cursor: auto;    
}
#custom-reviews .swiper-slide {
    width: 31.5% !important;
    margin-right: 0px !important;
    margin-bottom: 30px;
}
#custom-reviews .elementor-main-swiper {
    width: 100%;
}
				
			

4. Fix tablet and mobile

To make sure we switch to one item per row on tablet or mobile view. Add the following custom CSS to the widget.
				
					@media screen and (max-width: 1024px) {
#custom-reviews .swiper-slide {
    width: 47.5% !important;
}
}
@media screen and (max-width: 767px) {
#custom-reviews .swiper-slide {
    width: 100% !important;
}
}
				
			

That’s it! Any questions? Make sure to drop me a line.