media query property is not reflecting in Style Manager

[dev4322]

I have created a created a grapesjs component like this
{
type: 'text',
attributes: { id: 'title'},
content: <div>Hello world</div>,
style: {
'font-size': '34px',
}
},

font-size property is applied in desktop, now i need to change font-size for mobile for that i have written media query
@media only screen and (max-width: 575px) {
#title{
font-size: 17px !important
}
}

when i inspect element font-size 17 is applied but grapesjs editor is not showing font-size 17 .
it shows font-size 34 without clean sign, but applied property is 17 (checked in inspect element).
can any one tell me another way of doing this or tell me what i am doing wrong?

[artf]

You should add a Device with that size (575px)

[dev4322]

By default with size 480px device is added. i have tried on it but its not working.