Add Custom CSS Breakpoints to WordPress and Elementor (for Mobile Devices)

It can be challenging to design a website that looks great on all devices, from large desktop monitors to small smartphone screens.

Responsive design is essential, and one of the most effective ways to achieve it is by using custom CSS breakpoints.

In this article, I will guide you through adding custom CSS breakpoints in WordPress and Elementor, helping you tailor your website’s appearance specifically for tablets, smartphones, and other screen sizes.

This method is beneficial when your theme or page builder doesn’t provide built-in options to adjust certain elements based on screen size.

Whether you want to change the color of your page titles, style links differently on mobile, or customize any other part of your site, adding your own CSS breakpoints gives you complete control.

Understanding Breakpoints and Responsive Design

Before diving into the practical steps, let’s clarify what breakpoints are and why they matter. In responsive web design, breakpoints refer to specific screen widths at which the layout or styling of a website changes to better suit the device. Standard breakpoints include widths for desktops, tablets, and smartphones.

Many WordPress themes and page builders, such as Elementor and Divi, provide default breakpoints and responsive controls. For example, you can adjust the logo, font, or margins for tablets or mobile phones. However, these built-in options can be limited, especially if you want to customize elements that aren’t directly accessible through the theme’s settings.

This is where custom CSS breakpoints come in handy. By writing your own CSS rules within media queries, you can target any screen size and style any element exactly how you want.

How to Add Custom CSS Breakpoints in WordPress

Let’s start with a simple example of a WordPress website. Imagine you want to change the color of your page title only on tablets or smaller devices, but your theme doesn’t offer a customization option for the title color at these screen sizes.

Here’s the process:

1. Open the Appearance Settings: In your WordPress dashboard, navigate to Appearance> Customize, where you can find various theme customization options.
2. Check Available Responsive Controls: Some themes allow you to change the size of body text or other properties based on screen size, but you may not find controls for specific elements, such as page titles.
3. Add Custom CSS with Breakpoints: If the option you want isn’t available, you can add custom CSS using media queries to target specific screen sizes.

Here’s an example of a CSS media query targeting screens smaller than 768 pixels wide (commonly tablets and smartphones):

@media only screen and (max-width: 768px) {
  /* Your CSS rules here */
}

Any CSS you write inside this block will only apply when the screen width is 768 pixels or less.

Example: Changing the Page Title Color on Mobile

Suppose you want the <h1> page title to turn blue on devices with a screen size of 768px or less. You might try this CSS:

@media only screen and (max-width: 768px) {
  h1 {
    color: blue;
  }
}

After adding and publishing this CSS, you might notice it doesn’t work as expected. This is because other CSS rules from your theme or page builder might be more specific and override your new style.

To fix this, inspect the page title element in your browser’s developer tools and find the exact class or ID assigned to the title. Then, update your CSS to be more specific. For example:

Replace h1 with your title element’s actual class or ID (.page-title-class). This specificity ensures your CSS rule takes precedence.

Once you publish and refresh your live site, resizing the browser window below 768px should change the title color to blue. Above that width, the title reverts to its default style.

Applying Custom CSS Breakpoints in Elementor

Elementor, one of the most popular WordPress page builders, offers built-in responsive controls for several elements. You can adjust font sizes, margins, and other styles for desktop, tablet, and mobile views.

However, some elements, such as tags or anchor links, may not have direct styling options for different screen sizes.

In this case, the same approach of using custom CSS breakpoints applies. Here’s how you can do it in Elementor:

1. Create or Select the Element: For example, add a link widget or create a link inside a text editor.
2. Check Elementor’s Responsive Options: Go to the Style tab and look for responsive controls. You might find options for font size or color for tablet and mobile, but sometimes these are limited.
3. Add Custom CSS: To fully customize the link’s Appearance based on screen size, navigate to the Advanced tab and then the Custom CSS section (available in Elementor Pro).
4. Write Your Media Query: Use a media query targeting your desired breakpoint and add CSS rules.

Example: Styling Links Differently on Very Small Screens

Let’s say you want your links to have a red underline only on tiny screens (under 400 pixels wide). You can add this CSS in Elementor’s Custom CSS field:

@media only screen and (max-width: 400px) {
  a {
    text-decoration: underline;
    color: red;
  }
}

After publishing, use the browser’s developer tool to resize your browser window below 400 pixels.

The links will turn red and receive an underline, making them more visible and user-friendly on smaller mobile devices.

This example also demonstrates that you’re not limited to standard breakpoints, such as 768px for tablets or 480px for phones—you can use any screen width to target particular devices.

Tips for Using Custom CSS Breakpoints Effectively

• Be Specific with Selectors: Use unique classes or IDs to avoid overriding your CSS by theme or plugin styles.
• Test Across Devices: Always check your site’s appearance on multiple screen sizes and devices to ensure your breakpoints work as intended.
• Use Browser Developer Tools: Inspect elements and test CSS live in your browser to fine-tune your selectors and styles.
• Combine with Theme Options: Use your theme’s responsive controls whenever possible and supplement with custom CSS for more precise control.
• Keep CSS Organized: Comment your CSS code to indicate which screen sizes and elements you target for easier maintenance and modification.

Why Custom CSS Breakpoints Matter

Responsive design isn’t just about shrinking or expanding content; it’s about adapting to different screen sizes and resolutions. It’s about optimizing the user experience for every device. Sometimes, you want to:

• Make text more readable on small screens by adjusting font size or color.
• Adjust button sizes or styles to enhance tap targets on mobile devices.
• Hide or show certain elements based on the device to reduce clutter.
• Enhance navigation and links for touchscreen usability.

Custom CSS breakpoints can tailor these experiences exactly as you envision them, regardless of your theme or page builder’s default capabilities.

Getting Started: Where to Add Your Custom CSS

Depending on your setup, there are several places you can add custom CSS in WordPress and Elementor:

• WordPress Customizer: Go to Appearance > Customize > Additional CSS to add site-wide CSS.
• Theme or Child Theme Stylesheet: Add your CSS to your child theme’s style.css file for permanent changes.
• Elementor Custom CSS: To customize individual elements or sections, use Elementor Pro’s Custom CSS feature under the Advanced tab.
• Custom CSS Plugins: Use plugins designed to add custom CSS if you prefer a plugin-based approach.

Regardless of your chosen method, ensure that you test your CSS changes thoroughly and back up your site before making any extensive modifications.

Conclusion

Adding custom CSS breakpoints to your WordPress site and Elementor pages lets you precisely control how your website appears and functions across various devices. When default theme or page builder options don’t offer the flexibility you need, custom CSS media queries are your best friend.

This approach empowers you to create a seamless and professional responsive design, from changing title colors on tablets to styling links on tiny mobile screens. Remember to be specific with your CSS selectors, test thoroughly, and refine your styles using browser developer tools.

Explore the resources available from trusted providers to learn more about WordPress plugins, themes, and customization tips.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.