How to push classes declarations to the head ? (based on the breakpoint value for the queries)

[simoco0781]

Hi folks,
I now it's on the map road but waiting for it, i'm working on creating a CustomBlocksType with a panel "responsive" containing switch buttons that enable to add a class (mob-hide/desk-hide) to the element generated.

Now, how can I add the delaration of my classes in the head of the email ?
something like that, based on the breakpoint value

<mj-style>
        @media (min-width:calc(320px + 1px)){
          .desk-hide{
            display: none;
          }
        }
        @media (max-width:320px){
          .mob-hide{
            display: none;
          }
        }
</mj-style>

Thanks a lot

[simoco0781]

It seems that you have to write it on the headStyles :
content: { data: { value: { breakpoint: '480px', headStyles = [ { content: " /* hide on desktop */ .desk-hide{ display:none; } ", }, { content: " @media only screen and (max-width: 480px){ /* show on mobile */ .desk-hide{ display: block; } /* hide on mobile */ .mob-hide{ display:none; } }", }, ] } } }