Useful WordPress Responsive CSS Breakpoints

If you need to make CSS changes to your WordPress website but only want to target specific devices such as mobiles or tables you can do so by using the following CSS snippets below.

These CSS snippets can be used on any type of website or platform.

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 */
}

For WordPress Websites

You can add the CSS media rules directly in your WordPress admin area. Go to Appearance > Customize. Look for a section labelled “Additional CSS” or something similar, usually on the left side menu. Paste your media query code there and click “Publish” to save the changes. This will make your website adapt to different screen sizes based on the rules you defined.

---

If you need help with custom CSS or want to make CSS changes to your website, reach out to us. We can help with all types of CSS tasks, whether it be a fix, an edit or a complete rewrite.