While the LiveStyle-Extension is active in chrome AND a remote css is in actively in sync with my local-css inside sublime:
It seems as though media Queries cannot be added to my local-CSS File. Nor can media queries be added to the Remote-CSS File using the sources Tab inside the chrome inspector.
Otherwise the LiveStyle "sync" works perfectly across the entire content of both css-document(s).
Only if a new media query is added, it will be disregarded by LiveStyle.
Is there anything I need to obey when writing media-queries?
Trial and error made me identify mediaqueries cannot be established successfully AFTER the initial sync process, but must be established PRIOR to the sync, otherwise they will be disregarded. To be more precise: Once a breakpoint is changed, that will break the entire media query and all of its content from beeing regarded inside both documents. I found out that the LiveStyle-Chrome-Extension can be turned off and back on again to workaround this weired issue. In order to apply Media queries I went through quiet some trial and error until I grasped the correlation. I am not aware if this behaviour is wanted/inevitable when using the LiveStyle-Plugin, or if this might be considered as a bug. Looking at it from a user-perspective it might be helpful to either display some sort of a warning to let users know the applied change is not regarded until the tool will be restarted, or, of cause, the LiveStyle-Plugin itself might be improoved to autodetect changes even if they are applied to media queries.
While the LiveStyle-Extension is active in chrome AND a remote css is in actively in sync with my local-css inside sublime:
It seems as though media Queries cannot be added to my local-CSS File. Nor can media queries be added to the Remote-CSS File using the sources Tab inside the chrome inspector.
Otherwise the LiveStyle "sync" works perfectly across the entire content of both css-document(s). Only if a new media query is added, it will be disregarded by LiveStyle. Is there anything I need to obey when writing media-queries?
@media (min-width: 950px) {body {background-color: yellow !important;}} @media (max-width: 799px) {body {background-color: green !important;}}
Trial and error made me identify mediaqueries cannot be established successfully AFTER the initial sync process, but must be established PRIOR to the sync, otherwise they will be disregarded. To be more precise: Once a breakpoint is changed, that will break the entire media query and all of its content from beeing regarded inside both documents. I found out that the LiveStyle-Chrome-Extension can be turned off and back on again to workaround this weired issue. In order to apply Media queries I went through quiet some trial and error until I grasped the correlation. I am not aware if this behaviour is wanted/inevitable when using the LiveStyle-Plugin, or if this might be considered as a bug. Looking at it from a user-perspective it might be helpful to either display some sort of a warning to let users know the applied change is not regarded until the tool will be restarted, or, of cause, the LiveStyle-Plugin itself might be improoved to autodetect changes even if they are applied to media queries.