How to Change Customizer Device Breakpoints

Hi there,

This should help:

add_filter( 'generate_customizer_device_preview_sizes', function() {
    return array(
        'tablet' => 900,
        'mobile' => 640,
    );
} );

Adding PHP: https://docs.generatepress.com/article/adding-php/

Great! That is ideal. And how can I change the height of the preview size?

Thanks!

That would require custom PHP - which height are you trying to adjust?

Hello,

Well, these are the default WordPress attributes for mobile screen size that I would like to restore:

.preview-mobile .wp-full-overlay-main {
margin: auto 0 auto -160px;
width: 320px;
height: 480px;
max-height: 100%;
max-width: 100%;
left: 50%;}

It would just be useful to know where in the theme the settings are being changed to this:

.wp-customizer .preview-mobile .wp-full-overlay-main {
width: 640px;
margin: 0 auto;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
height: 100%;}

To be honest, I'm wondering why GeneratePress is setting the mobile breakpoint as 640px, when this is a bit beyond industry standard. Is there a reason why?

Thanks!

We've actually changed it in GPP 1.10 to:

$sizes = apply_filters( 'generate_customizer_device_preview_sizes', array(
    'tablet' => 800,
    'mobile' => 411,
    'mobile_height' => 731,
) );

For now, you can change the height like this:

add_action( 'customize_controls_print_styles', function() {
    ?>
        <style>
            .wp-customizer .preview-mobile .wp-full-overlay-main {
                height: 480px;
            }
        </style>
    <?php
} );

Amazing, thank you so much!

No problem :)