Return to previous page

How to Show Categories Spotlight Vertical Instead of Horizontal in Mobile View of Products Archive

This topic has 6 replies, 3 voices, and was last updated 1 months, 2 weeks ago ago by Andrew Mitchell

regencycigaremporium

Participant

December 4, 2024 at 14:55

Dear XStore Team,

I hope this message finds you well. First, let me express how much I appreciate the incredible flexibility and elegance of your theme—it’s truly a standout!

I’m reaching out to seek your guidance on a customization for our website. We’d like to display the categories spotlight section in a vertical layout instead of horizontal when viewed on mobile devices. Could you kindly assist with the best way to achieve this?

Thank you in advance for your help and for providing such an excellent theme. I look forward to your advice!

Warm regards,

Keesha
RegencyCigar.com

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#426433 Copied Theme version: 9.4.5

5 Answers
Jack Richardson

Support staff

December 4, 2024 at 16:09
Hello @regencycigaremporium

You can try to use next custom CSS:
```
@media only screen and (max-width: 768px) {
    .elementor-widget-woocommerce-archive-etheme_dynamic_categories .etheme-elementor-slider {
        overflow: visible;
        pointer-events: none;
    }
    .elementor-widget-woocommerce-archive-etheme_dynamic_categories .swiper-wrapper {
        display: block;
        transform: none !important;
    }
    .elementor-widget-woocommerce-archive-etheme_dynamic_categories .swiper-wrapper .swiper-slide {
        pointer-events: all;
        width: 100% !important;
    }
}
```
Kind regards, Jack Richardson
The 8theme’s team
#426446 Copied
regencycigaremporium

Participant

December 4, 2024 at 16:50

Dear Jack,

Thank you so much for the code and guidance—it worked perfectly! The categories are now displaying in a vertical layout on mobile, just as we needed.

However, we would like to adjust it slightly to match the layout in the first sample image we provided: a vertical layout with two columns for the categories. Is there a way to achieve this structure?

We truly appreciate your continued support and the amazing customization options your theme offers. Looking forward to your guidance!

Warm regards,
Keesha
RegencyCigar.com

Files is visible for topic creator and
support staff only.

#426451 Copied
Jack Richardson

Support staff

December 5, 2024 at 14:09
Hello @regencycigaremporium
Please, try next CSS code:
```
@media only screen and (max-width: 768px) {
    .elementor-widget-woocommerce-archive-etheme_dynamic_categories .etheme-elementor-slider {
        overflow: visible;
        pointer-events: none;
    }
    .elementor-widget-woocommerce-archive-etheme_dynamic_categories .swiper-wrapper {
        display: block;
        transform: none !important;
        margin-left: -5px;
        margin-right: -5px;
        pointer-events: none;
    }
    .elementor-widget-woocommerce-archive-etheme_dynamic_categories .swiper-wrapper .swiper-slide {
        pointer-events: all;
        width: calc(50% - 10px) !important;
        margin: 0 5px !important;
        float: left;
    }
}
```
Kind regards, Jack Richardson
The 8theme’s team
#426557 Copied
regencycigaremporium

Participant

December 5, 2024 at 15:02

It worked! Thank you soooo much! You are the best!!! Thank you, thank you, thank you so much!!!

#426567 Copied

Andrew Mitchell

Support staff

December 5, 2024 at 15:02

Dear regencycigaremporium,

Choosing our theme reflects your commitment to quality, and for that, we’re genuinely grateful. As we constantly strive to elevate your experience, your feedback is an invaluable gift. Could you kindly take a moment to rate our product with 5 stars on ThemeForest?

Click here to share your insights: https://themeforest.net/downloads

Your support fuels our journey, and we appreciate it more than words can express.

Best Regards,
The 8Theme Team

#426568 Copied
Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘How to Show Categories Spotlight Vertical Instead of Horizontal in Mobile View of Products Archive’' has been successfully resolved, and the topic is now closed for further responses

How to Show Categories Spotlight Vertical Instead of Horizontal in Mobile View of Products Archive

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection