Custom Elementor Breakpoints Setup & Configuration by Master Addons #

Last updated: June 29, 2026 — written by Roy, Master Addons team.

The Custom Elementor Breakpoints feature, available through Master Addons Pro (or up to 3 breakpoints in the free version), allows you to create fully responsive website layouts optimized for a wider range of screen sizes beyond Elementor’s default Mobile, Tablet, and Desktop settings. This ensures a consistent and high-quality user experience across any device.Using Custom Elementor Breakpoints, you can:

Add as many custom breakpoints (screen widths) as needed (unlimited with Master Addons Pro).
Define specific layouts, font sizes, spacing, and alignment for devices like Small Mobile, Large Tablet, or custom screen sizes.
Override Elementor’s default responsive behavior at precise pixel widths.

What Are Custom Elementor Breakpoints? #

Custom Elementor breakpoints are extra, user-defined screen-width thresholds that let your layout adapt at sizes beyond Elementor’s built-in Mobile, Tablet, and Desktop views. Instead of being limited to three device views, you set the exact max-width (in pixels) where a new responsive layout should begin — for example a 600px small-mobile breakpoint. Master Addons adds up to 3 custom breakpoints on the free plan and unlimited breakpoints with Pro, giving you precise control over responsive design without touching code.

So, let’s see how to set up and configure this feature.

Setting Up Custom Elementor Breakpoints #

Follow these steps to install and define your custom breakpoints.

Step 1: Install and Activate the Extension #

Navigate to the Master Addons menu in your WordPress dashboard.
Go to the Extension tab.
Find the “Custom Breakpoints” option and click the download button to install and activate it on your website.

Step 2: Access the Breakpoints Settings #

In the WordPress dashboard, hover over the Master Addons menu.
A new menu item titled “Breakpoints” will appear. Click on it. This will redirect you to the custom breakpoint input page.

Step 3: Add Custom Breakpoints #

On the Breakpoints input page, you will see Elementor’s three default breakpoints (Mobile, Tablet, and Desktop).To add a new custom breakpoint, use the input field to set only the Max-Width (in pixels).For example, to target small mobile devices, enter 600px as the max width.After saving, the system will automatically adjust the Min-Width for the next default breakpoint. In the example above, the “Small Mobile” breakpoint will apply to all screens less than or equal to 600px, while the default “Mobile” breakpoint will start at 601px and end at the Tablet breakpoint’s minimum width.You can add or remove breakpoints as needed from this page.

Using Custom Elementor Breakpoints #

Once configured in the Master Addons settings, the custom breakpoints become available directly in the Elementor page editor.

Step 1: Open Responsive Mode in Elementor #

Go to any page and click “Edit with Elementor.” Click the Responsive Mode icon (usually a monitor and phone icon) at the bottom left of the panel.

Step 2: Select a Custom Breakpoint #

The top bar will display all available breakpoints, including the custom ones you created (e.g., “Small Mobile”).Click on your Custom Breakpoint to change the editor view to that specific screen size.

Step 3: Apply Custom Styles #

Select any element (e.g., a Heading widget). Go to the element’s Style tab.Click the Responsive Icon (desktop monitor) next to any style setting, such as Typography > Size or Content > Alignment.Define a specific value for that breakpoint (e.g., set the font size to 20px). This value will only apply when the browser width is within the range defined for that custom breakpoint.

Step 4: Save and Preview #

Once you have defined your responsive styles for all necessary breakpoints, click Update to save the page.Preview the page live and resize your browser window to see your custom breakpoints trigger the unique styles you defined.

Theme Builder

Popup Builder

Widget Builder

Mega Menu Builder

Custom Css

Dynamic Tags

Display Conditions

Icons Library

Animation

Template Kits

Ready Sections

Ready Popups

Ready Pages

Ready Header

Ready Footer

WP Adminify

Admin Bar Editor

Loginfy

Rolemaster Suite

Master Blocks

WP Spotlight