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, 5 months ago ago by Olga Barlow

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
Olga Barlow

Support staff

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: breadcrumbs, devices, hide, mobile, woocommerce, wordpress
Viewing 2 results - 1 through 2 (of 2 total)

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

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder

Barbershop – WordPress WooCommerce Theme

lazy-placeholder

Marketing – WordPress WooCommerce Theme

lazy-placeholder

Online Courses – WordPress WooCommerce Theme

lazy-placeholder

Designers – WordPress WooCommerce Theme

lazy-placeholder

Tea Store – WordPress WooCommerce Theme

lazy-placeholder

Language Courses – WordPress WooCommerce Theme

lazy-placeholder

Books Store – WordPress WooCommerce Theme

lazy-placeholder

Cocktails Store – WordPress WooCommerce Theme

lazy-placeholder

Legenda – WooCommerce WordPress Theme

lazy-placeholder

Web 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.