I spent all day today struggling with a problem that I remember having years ago. It was in regards to updating the breakpoints for Tablet and mobile screens for Elementor websites.
In my case, this became something I needed because a client was wanted to turn their phone horizontal, and the design was automatically reverting to the desktop styling. By manually setting the breakpoints, I was able to fix this problem on my website.
Here are the steps for updating your mobile and tablet breakpoints in Elementor:
Step 1: Log in to WordPress
This is an easy part. You’ll want to login to your WordPress website (most likely through /wp-admin) so we can move forward.
Step 2: Click Edit with Elementor on any Page
Go to pages in WordPress backend and click edit with Elementor on any page.
Step 3: Click Three Lines Icon in Top Left, Go To Site Settings
Site settings are a new menu inside of the Elementor theme editor which allows people to customize CSS functions across their entire site at one time. From typography to colors and animations, this is a great feature! They recently moved breakpoint options into the layout menu here.
Step 4: Go To Layout Menu
Scroll down a bit and click the Layout menu.
Step 5: Adjust Breakpoints!
In the layout menu, under the breakpoints menu, you will see your options to adjust the breakpoints for your Elementor site!
Best Practices for Breakpoint on your WordPress Elementor Website
Since the beginning of the mobile web, it’s been difficult to design experiences that look as great on desktop as they do on mobile. With fantastic page builders like Elementor, that process is more straightforward and easier to accomplish by the everyday person.
These are the most common breakpoints for websites and mobile apps:
- Mobile: 600px
- Tablet: 900px
- Desktop 1200 px
Below, I have collected some graphs of the most common screen sizes among people using mobile devices. Here are comparisons between 2016 and 2020.
In 2016
Source: StatCounter Global Stats – Screen Resolution Market Share
Now
Source: StatCounter Global Stats – Screen Resolution Market Share
Looking at the graphs, you can see that many more people are using larger screen sizes, and the screen sizes vary in size much more than they used to. Just something interesting to consider!
Mobile & Tablet Breakpoint FAQ
How do I change when my website switches from mobile to tablet?
Breakpoints help your website determine when it should use different sizing for elements between mobile, desktop, and tablet. If you are using WordPress or a Bootstrap based framework, breakpoints should already be built-in to your website. Many websites that are on older platforms might not be friendly for mobile and therefore not have breakpoint functionality.
Can you update the breakpoints in Elementor?
Since the Elementor Global Site Settings update, many key theme features have been moved to this location. In Elementor in 2021, you’ll be able to find breakpoints in the Site Settings > Layout > Breakpoints menu. Read this article if you want direct instructions!
