XF 1.4 Is there a better way to do this?

[popowich]

Right now I have some CSS that has some screen width detection and to figure out as needed if I want to display code for desktop or mobile, for example:

EXTRA.css:

@media screen and (min-width: 481px) {
#EQ-mobile { display: none; }
#EQ-desktop { display: initial; }
}

@media screen and (max-width: 480px) {
#EQ-mobile { display: initial; }
#EQ-desktop { display: none; }
}

Starting blocks to use within templates:

<div id="EQ-mobile">
</div>

<div id="EQ-desktop">
</div>

Is seems like Google is picking up on this and all code runs all the time though not all of it gets displayed.

Is there a way for me to improve on what I'm doing above?

 

[popowich]

Why do you think it's invalid? It's working and lets me display different code sections for desktop vs. iPhone.

I see the response disappeared so I'll hold off a moment.