Home » Tutorials » Responsive Design With Elementor Breakpoints – Easy Fix!
Have you ever noticed your landing page looks broken on smaller or larger devices?
According to Global Internet Traffic Share data (2025), nearly 63-64% of internet users browse on mobile, while only 36-37% use a laptop.
These days, most people surf the web and make purchases using their mobile devices.
As an Elementor plugin user, you’ve worked hard to build your website. While Elementor does offer responsive design by default, unexpected issues can still occur.
That’s why I recommend checking your website at least once a month across various devices. Don’t rely solely on the device toolbar preview (Inspect Element) on your laptop – it can give a false sense of perfection.
In this guide, I’ll show you how to fix existing responsive issues and ensure that every Elementor container on your site stays 100% responsive moving forward. Feel free to explore our Custom Breakpoint for Elementor to add unlimited breakpoints.
There are a few common issues that many general users face, such as text or images spilling off the screen, like in the screenshot below.
Most of us (myself included) preview the layout on a desktop and then publish the landing page – assuming it looks fine across all devices.
Luckily, fixing these issues is simple. Just open the Elementor editor for your desired page, click on the problematic element, then select the device icon to switch views. Make adjustments for that specific device.
For example, I select the title element, click the mobile icon for responsive settings, and adjust the font size for mobile devices.
Once I preview the page again, the overlapping issue is resolved on mobile.
This will solve nearly 80% of the issues faced by Elementor users. In the next section, I’ll dive deeper into some of the advanced responsive options Elementor provides. Also, you can try an online tool to test responsiveness.
Elementor offers six custom breakpoints for all users. But by default, they’re disabled by Elementor. If you need extra control over your responsive layout, then you have to enable the breakpoints from settings.
Navigate to Elementor > Settings > Features. Now scroll down a little bit and search for the “Additional Custom Breakpoints” option. Click on the dropdown option and select “Active.”
That’s not the end of the configuration. Now we have to define the extra breakpoints from site settings. To do this, just navigate to the Elementor editor for any page or post.
Now click on the site settings icon, scroll down, and search for the Layout option.
After clicking on the Layout option, scroll down to the bottom and you’ll find the “Breakpoints” option. Just click on this Breakpoints option and choose your desired custom breakpoints provided by Elementor.
After selecting all of your preferred breakpoints, you can also define their widths too. Just add your desired value for custom width and save the settings. Make sure to input your width value in px.
As soon as you save the settings after your breakpoint customization, it will ask you to reload the page. I recommend you start breakpoint customization after saving your page content; otherwise, you may lose your content after reloading.
When the reload is complete, you will notice all additional custom breakpoint icons in the responsive settings. Now you can choose your desired breakpoint and start customization for the specific breakpoint.
I recommend you add all your content and apply all basic styles like font, font size, border, margin, and padding first. Then start checking your responsiveness from a mobile device.
Use relative units like rem for font size instead of pixels.
If you have created a very complex container using Elementor with different types of animation, positioning, and adjustments that are not properly visible on mobile or tablet devices, then I suggest you hide this section for mobile or tablet and create an alternative section. From the Elementor Advanced tab, you can hide the full container for your preferred breakpoints.
Never use too much custom CSS for breakpoints. This can slow down your website’s performance. By the way, if you use Master Addons for Elementor plugin, then you can use Custom CSS for free in your Elementor editor.
Finally, never trust browser-based device previews. As I already mentioned, you must check your website from a real device.
Responsive design is not a luxury – it’s an essential feature for every website owner. With the help of custom Elementor breakpoints, you can control your website layout and apply pixel-perfect designs.
Your readers are your greatest asset. If you can provide them with a smooth experience, they’ll definitely return.
Feel free to comment if you have any better suggestions regarding Elementor responsive design that I might have missed.
Your email address will not be published. Required fields are marked *
Comment *
Name *
Email *
Website
Save my name, email, and website in this browser for the next time I comment.
Δ