Expand position by screen resolution

This is beyond the scope of our plugin, but here are some links that might help:
https://stackoverflow.com/questions/20855806/php-with-screen-width-condition
https://wordpress.stackexchange.com/questions/108882/run-shortcode-at-certain-resolution
https://css-tricks.com/forums/topic/how-to-load-a-section-of-content-only-if-the-screen-is-over-a-certain-width/

Good Luck!

Hi,

I’m fairly novice with creating websites, but could this not be done with media queries? Assign a class to the [expands] and display:none/dispaly:block based on the screen resolution.

Like this:
[expand class=”exampleclass1″]Content[/expand]
[expand class=”exampleclass2″]Content[/expand]
[expand class=”exampleclass3″]Content[/expand]

and CSS:
.exampleclass2{display:none;}
.exampleclass3{display:none;}

@media only screen and (min-width:43rem){
.exampleclass1{display:none;}
.exampleclass2{dispaly:block;}
}/* Tablet, not sure of the exact breakpoint. Might also need to set extra rules depending on orientation */

@media only screen and (min-width:55rem){
.exampleclass2{display:none;}
.exampleclass3{display:block;}
}/* For desktop, again not sure about the breakpoints */

Would this work? Like stated above, I’m fairly new to creating websites and would like to know if my solution works.

Also, good luck with your project!