[Resolved] How to Change Customizer Device Breakpoints

Home Forums Support [Resolved] How to Change Customizer Device Breakpoints

Home Forums Support How to Change Customizer Device Breakpoints

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1189361
    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!

    #1189796
    Tom
    Lead Developer
    Lead Developer

    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/

    #1189827
    Arran

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

    Thanks!

    #1190210
    Tom
    Lead Developer
    Lead Developer

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

    #1190412
    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!

    #1191018
    Tom
    Lead Developer
    Lead Developer

    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
    } );
    #1191036
    Arran

    Amazing, thank you so much!

    #1191037
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.