Return to previous page

CSS Code to hide Breadcrumbs on Mobile Devices

This topic has 2 replies, 2 voices, and was last updated 3 years 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

Recent Community Activity

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Kidsstore – WooCommerce Theme
lazy-placeholder
Industrial Power Tools Store – WordPress WooCommerce Theme
lazy-placeholder
Furniture Store – WordPress WooCommerce Theme
lazy-placeholder
Grocery Mega Market – WordPress WooCommerce Theme
lazy-placeholder
BookStore – WordPress WooCommerce Theme
lazy-placeholder
Flowers Store – WooCommerce Theme
lazy-placeholder
Marseille04 – WordPress WooCommerce Theme
lazy-placeholder
Interior Store – WooCommerce Theme
lazy-placeholder
Marketing – WordPress WooCommerce Theme
lazy-placeholder
SEO Agency – 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.