Return to previous page

CSS Code to hide Breadcrumbs on Mobile Devices

This topic has 2 replies, 2 voices, and was last updated 2 years, 8 months ago ago by Olga Barlow

  • Avatar: Zubair Ahmed
    Zubair Ahmed
    Participant
    May 30, 2022 at 08:46

    Hi, I have tried many possible solutions to hide the breadcrumbs on mobile devices, also used your below code found in your forums support

    @media only screen
    and (max-width: 480px) {
    .breadcrumbs { display: none !important; }
    }

    ABOVE CODE IS NOT WORKING.

    Please help me how to hide the breadcrumbs on mobile devices.

    Thanks

    #324807 Copied Theme version: 8.1.5 WooCommerce version: 6.5.1
    1 Answer
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    May 30, 2022 at 15:47

    Hello,

    Try the below code

    @media only screen and (max-width: 480px) {
.page-heading, .page-heading .breadcrumbs, .page-heading .woocommerce-breadcrumb {
        display: none !important; }
}

    Regards

    #324829 Copied

  • Tagged: , , , , ,

  • Viewing 2 results - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.Log in/Sign up

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Church – WordPress Theme
lazy-placeholder
Interior – WordPress WooCommerce Theme
lazy-placeholder
Legenda – WooCommerce WordPress Theme
lazy-placeholder
Watches Store – WooCommerce Theme
lazy-placeholder
Bakery Store – WordPress WooCommerce Theme
lazy-placeholder
Minimalist Outfits – WordPress WooCommerce Theme
lazy-placeholder
Classic Fashion Store (Dark) – WordPress WooCommerce Theme
lazy-placeholder
Bags Store – WooCommerce Theme
lazy-placeholder
Business Card – WordPress Theme
lazy-placeholder
Organic Cosmetics 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.