.state-indicator {
    position: absolute;
    top: -999em;
    left: -999em;
}

/* Full desktop */
.state-indicator:before { content: 'desktop'; }

/* small desktop */
@media all and (max-width: 1200px) {
    .state-indicator:before { content: 'small-desktop'; }
}

/* Most tablet */
@media all and (max-width: 1024px) {
    .state-indicator:before { content: 'tablet'; }
}

/* Most mobile phone */
@media only screen 
  and (max-device-width: 736px)  
{ 
    .state-indicator:before { content: 'mobile'; }
}