Module.css doesn't recognize @container query tag

Hello!

I’m trying to build a custom module for user testimonials that will display differently based on the width of the container it exists in. All major browsers have support for @container media queries, but in the HubSpot design editor, all the classes inside of the container media query are lit up with red. It works perfectly outside of HubSpot.

Are container queries not supported in HubSpot yet?

Hey, @MichaelPersson :waving_hand: Thanks for reaching out!

I see our friend and community champion @Jake_Lett wrote a HubSpot developer blog post about this topic recently — Help Prevent Bad Design using CSS Container Queries to Style Modules.

I’ll also invite @Indra @alyssamwilie @assi to share their experience as well.

Best,

Jaycee

Appreciate the mention @Jaycee_Lewis

I was curious to check if I see the same thing in the module I used for my blog post and can confirm those properties are marked red. So it’s a false error like you mentioned but you are still able to publish.

I would trust the HubL errors more than the CSS errors in this case because it takes time/resources to update to the latest spec.

If it works in the browser then you can just ignore those errors.