Useful WordPress Responsive CSS Breakpoints

If you need to make CSS changes to your WordPress website but only want to target different device sizes you can do so by using the following CSS snippets below.

To target desktop view only, use:

@media (min-width: 1025px) {
    /* CSS in here for desktop only */
}

To target tablets, use:

@media (min-width: 769px) and (max-width: 1024px) {
    /* CSS in here for tablet only */
}

To target mobile devices, use:

@media (max-width: 768px) {
    /* CSS in here for mobile only */
}

To target all three breakpoints:

@media (max-width: 768px) {
    /* CSS in here for mobile only */
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* CSS in here for tablet only */
}

@media (min-width: 1025px) {
    /* CSS in here for desktop only */
}

You can add the CSS media rules above by inserting them into the WordPress Customizer (Appearance > Customizer) under Additional CSS.