Product Archive Layout responsive column issues in Elementor pro

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.

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 */
    }
}

I hope after using this code your issue will be fixed,

If this code doesn’t work for you, you can discuss this issue with us further by clicking here.