When you visit your site and click customize, you can change the layout of your website to its Tablet and Mobile counterparts. What exactly are the default breakpoints set by WordPress for Desktop, Tablet, and Mobile? If possible, can I change these default values?

When you visit your site and click customize, you can change the layout of your website to its Tablet and Mobile counterparts. What exactly are the default breakpoints set by WordPress for Desktop, Tablet, and Mobile? If possible, can I change these default values?

• screen-layout

• 1 Possible duplicate of Adjust the Device Preview sizes used in the WP 4.5 Customizer – Antti Koskinen Commented Jun 12, 2019 at 10:42
• WordPress uses specific sizes for the device previews in the Customiser, but the actual breakpoints of your site are determined entirely by the theme. – Jacob Peattie Commented Jun 12, 2019 at 11:07

1 Answer 1

The widths of the preview window in the Customiser when selecting the tablet and mobile device previews are 720px and 320px respectively.

These are only defined in CSS, so there's no hook or anything for specifically overwriting those sizes. The original styles are defined in /wp-admin/css/themes.css, and look like this:

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

.preview-tablet .wp-full-overlay-main {
    margin: auto 0 auto -360px;
    width: 720px; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */
    height: 1080px;
    max-height: 100%;
    max-width: 100%;
    left: 50%;
}

So if you really wanted to change them, you could do so by loading custom styles for the customiser, like this:

function wpse_340269_customizer_styles() {
    ?>
    <style>
        .preview-tablet .wp-full-overlay-main {
            width: 680px;
        }

        .preview-mobile .wp-full-overlay-main {
            width: 375px;
        }
    </style>
    <?php
}
add_action( 'customize_controls_print_styles', 'wpse_340269_customizer_styles' );

All that being said, the wording of your question suggests there might be a misunderstanding about breakpoints, responsive design, and WordPress' role in both.

Those sizes above are merely sizes for previewing the site from the customiser. They have absolutely no effect on the front-end of the website. How your site responds to smaller devices has nothing to do with these sizes, and is determine entirely by your theme.

When it comes to breakpoints, these also have nothing to do with these sizes. 'Breakpoints' aren't even a real thing. With CSS, theme authors can change the styles of their theme based on the screen size of the user's device. Some developers will decide 2 or 3 specific screen sizes that all elements of their design will change at, but this is merely a choice by the author. Other developers might have fluid elements that don't change may times at all, while other elements on the page might be built to change at completely different sizes to everything else because that's what looks better.

The point is that themes don't necessarily all have 3 specific layouts at the same 3 specific sizes. There's a near infinite number of ways a developer/designer could choose to change their design across screen sizes.

The other thing to consider that's relevant to your question is that not all mobile and tablet devices have the same screen size. If you modify the tablet preview to 768 pixels, you might get a more accurate preview of an iPad (but not an iPad Pro), but that doesn't change the fact that some tablet screens are still smaller, so you probably still need to make sure everything looks ok at 720 pixels wide anyway!

Keep in mind that these buttons are just for end users to do quick previews of changes being made in the customiser. Those users shouldn't be shown previews of specific devices. The buttons are intended for previews of device classes. So the tablet button should show an average tablet, not a specific one.

Also, the preview buttons are not intended for development. If you are developing a new theme then you should use your browser's development tools, and make sure your site looks good at every single possible screen size. That's responsive design.