Within WP Theme Customizer, I am wondering if it is possible to allow users to set the size of a thumbnail based on the size of the screen? For example, the user could select (1) for screens above 981px, the thumbnail would be 300px, and (2)for screens less than 980px, the thumbnail would be 200px.

I developed two options:

Thumbnail Size - Medium Screen
Thumbnail Size - Large Screen

    <?php if( get_option('thumbnail_size_medium') ) { ?>.thumbnail {width: <? php echo get_option('thumbnail_size_medium'); ?>;}<?php } ?>

    <?php if( get_option('thumbnail_size_large') ) { ?>.thumbnail {width: <?php echo get_option('thumbnail_size_large'); ?>;}<?php } ?>

With the code above, I would be using two, separate options to update the same CSS element - .thumbnail. Within my CSS stylesheet, I use "@media" to make responsive elements. Within the Theme Customizer, how do I account for the screen size?

  • Wordpress don't have a native function to determine screen sizes. This is purely browser related. May 12, 2014 at 17:12

1 Answer 1


You could output large image inside an inline @media block assuming you are talking about window width and not literally screen width. Also providing a default if neither option is set so first if statement is not required.

.thumbnail {width: <? php echo get_option('thumbnail_size_medium') ?: $default_size; ?>;}

<?php if( get_option('thumbnail_size_large') ) { ?>@media ( min-width: 981px ) {.thumbnail {width: <?php echo get_option('thumbnail_size_large'); ?>;}<?php } ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.