Notifications
Clear all
Elementor Discussion
2
Posts
1
Users
0
Reactions
1,198
Views
Topic starter
03/09/2023 10:19 am
How to fix Product Archive Layout responsive column issues in Elementor Pro?
I saw an issue using the Elementor pro page builder.
Elementor products archive columns not working properly for responsive. Need to show the 3 columns for desktop, 2 columns for tablet, and 1 for mobile.
However, the Elementor Products Archive Widget doesn't have any options to fix this column issue. Also already tried to fix using theme customization But not working.
I understand this issue and already solved it. Please check the reply.
This topic was modified 2 years ago 4 times by Md Ismail Hossain
Topic starter
03/09/2023 10:31 am
If you want to solve this issue please use this CSS code.
/* Desktop Styles */
.elementor-element.elementor-products-grid ul.products {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columns for desktop */
gap: 20px; /* Adjust the gap as needed */
}
/* Tablet Styles */
@media (max-width: 1024px) {
.elementor-element.elementor-products-grid ul.products {
grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
}
}
/* Mobile Styles */
@media (max-width: 767px) {
.elementor-element.elementor-products-grid ul.products {
grid-template-columns: 1fr; /* 1 column for mobile */
}
}
