[Resolved] How to Change Customizer Device Breakpoints

[Arran]

Hi there,

I can’t figure out where the breakpoints in the wp-customizer are being set in the theme.. I would like the default WordPress breakpoints back (e.g for mobile: width: 320px;height: 480px;), but the theme is setting them to this:

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

How can I change? Thanks!

[Tom]

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/

[Arran]

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

Thanks!

[Tom]

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

[Arran]

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!

[Tom]

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
} );

[Arran]

Amazing, thank you so much!

[Tom]

No problem 🙂

[Author]

Posts