GeneratePress
/*===========================================================
= CUSTOMIZER RESPONSIVE PREVIEW SIZES =
===========================================================*/
// GP Premium has weird mobile sizes in the customizer. This changes it to iPhone XS portrait and iPad portrait (769px)
if( is_plugin_active( 'gp-premium/gp-premium.php' ) ) {
add_filter( 'generate_customizer_device_preview_sizes', function() {
return array(
'tablet' => 769,
'mobile' => 375,
);
} );
}
Vanilla WordPress
<?php
/*===========================================================
= CUSTOMIZER RESPONSIVE PREVIEW SIZES =
===========================================================*/
// The current WordPress customizer has outdated device preview sizes. This changes the previews to iPhone XS and iPad Pro sizes
add_action( 'customize_controls_print_styles', 'kpry_customizer_responsive_sizes' );
function kpry_customizer_responsive_sizes() {
// Mobile
$mobile_margin_left = '-184.5px'; //Half of -$mobile_width
$mobile_width = '369px';
$mobile_height = '800px';
// Tablet
$tablet_margin_left = '-540px'; //Half of -$tablet_width
$tablet_width = '1080px';
$tablet_height = '720px';
?>
<style>
.wp-customizer .preview-mobile .wp-full-overlay-main {
margin-left: <?php echo $mobile_margin_left; ?>;
width: <?php echo $mobile_width; ?>;
height: <?php echo $mobile_height; ?>;
}
.wp-customizer .preview-tablet .wp-full-overlay-main {
margin-left: <?php echo $tablet_margin_left; ?>;
width: <?php echo $tablet_width; ?>;
height: <?php echo $tablet_height; ?>;
}
</style>
<?php
}