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 2 months ago ago by Andrew Mitchell

  • Avatar: regencycigaremporium
    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
    Avatar: Jack Richardson
    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
    Avatar: regencycigaremporium
    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
    Avatar: Jack Richardson
    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
    Avatar: regencycigaremporium
    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
    Avatar: Andrew Mitchell
    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

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Niche Market – Multivendor WP WooCommerce Theme
lazy-placeholder
Marketing – WordPress WooCommerce Theme
lazy-placeholder
Coffee Store – WooCommerce Theme
lazy-placeholder
X-Phone Store – WordPress WooCommerce Theme
lazy-placeholder
Animals Store – WordPress WooCommerce Theme
lazy-placeholder
Books Store – WordPress WooCommerce Theme
lazy-placeholder
SEO Agency – WordPress WooCommerce Theme
lazy-placeholder
Business 02 – WordPress WooCommerce Theme
lazy-placeholder
Dokan Multivendor Marketplace – WordPress WooCommerce Theme
lazy-placeholder
Furniture Store – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.