How to show the product breadcrumb on mobile? (fluid engine)

Hi! Is there a way to still show the breadcrumbs on mobile view? I've tried targeting the breadcrumb code and displaying it to block with a media query for mobile, but that doesn't seem to work.

For reference, here's the site and a product page. Breadcrumb shows up on desktop but not mobile:

https://beamcenter.squarespace.com/benefit-brunch

https://beamcenter.squarespace.com/benefit-brunch/p/illuminator

Password: beam

Thank you!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem-nav .ProductItem-nav-breadcrumb, .ProductItem-nav {
    display: flex !important;
}
.hidden-sm-down {
    display: block !important;
    width: 100% !important;
}
}

I've just tried this and it just expanded the product images on mobile and the breadcrumbs still weren't visible..?

14 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem-nav .ProductItem-nav-breadcrumb, .ProductItem-nav {
    display: flex !important;
}
.hidden-sm-down {
    display: block !important;
    width: 100% !important;
}
}

 

Awesome, this worked for me. Thank you!

On 3/6/2023 at 1:21 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem-nav .ProductItem-nav-breadcrumb, .ProductItem-nav {
    display: flex !important;
}
.hidden-sm-down {
    display: block !important;
    width: 100% !important;
}
}

 

I spoke too soon — this actually created some other problems where the button wasn't clickable and the image repeated 3 times on mobile. I imagine the button issue could be fixed with z-index. I didn't have much time to figure out what was going on with the image, so I just removed the code and will forego the breadcrumb for now.

Hopefully Squarespace will add this feature in for mobile; not sure why it isn't an option.