Dynamic Categories widget – static grid layout on mobile not working

Hello @Andrei Andrei,

Please try adding the following custom CSS to your Spotlight Categories widget under “Advanced → Custom CSS”:

@media only screen and (max-width: 768px) {
    selector .etheme-dynamic-categories-wrapper .swiper, .etheme-dynamic-categories-wrapper .swiper-wrapper {
        cursor: default !important;
        overflow: visible !important;
        pointer-events: none;
    }
    selector .etheme-dynamic-categories-wrapper .swiper-wrapper {
        flex-wrap: wrap;
        transform: none !important;
        width: calc(100% + 10px);
        pointer-events: none;
        margin: 0 -5px;
        overflow: visible !important;
        display: flex;
    }
    
    selector .etheme-dynamic-categories-wrapper .swiper-slide {
        width: calc(100% / var(--cols, 4)) !important;
        pointer-events: none;
        padding: 5px;
        margin: 0 !important;
    }
    selector .etheme-category-grid-image.rounded {
        aspect-ratio: 1/1;
        width: auto;
        height: auto;
    }
    selector .etheme-dynamic-categories-wrapper .etheme-category-grid-image.rounded img, 
    selector .etheme-dynamic-categories-wrapper .etheme-category-grid-image:not(.etheme-category-grid-image-ghost).rounded img {
        object-fit: cover;
        width: auto;
        height: auto;
    }
}
@media only screen and (max-width: 550px) {
    selector .etheme-dynamic-categories-wrapper {
        --cols: 3;
    }
}

If you require our assistance, please provide the correct wp-admin access in the private content section.

Please note that there are currently no settings available to create a grid layout on mobile devices, as we have not yet received such requests on our task board. You are welcome to submit this as a feature request (https://www.8theme.com/roadmap/), and we will review its popularity based on customer votes.

Best regards,
Jack Richardson
The 8Theme’s Team

Hello,

We have observed that the slider is currently displayed on desktop devices, while a grid layout for these categories appears on devices with a width below 768px, as defined in our CSS. You may adjust this breakpoint to suit your responsive design needs, for example, to 480px.

We have tested the configuration, and it functions correctly on our end. However, if you encounter any issues, please provide detailed clarification. You can also modify the “–cols” (currently set to value 4) value in your CSS to adjust the number of columns as needed.

Our tests:
Desktop: https://gyazo.com/72e79f3fc3e3f08abe19b1f0edddedff
Responsive (below 768px): https://gyazo.com/e0180e153fa2bac648afd2b1d9b0f950

If you require our assistance, please provide the correct wp-admin access in the private content section.

Best regards,
Jack Richardson
The 8Theme’s Team