Elementor responsive editing lets you set different values for desktop, tablet and mobile: switch device in the bottom panel (or the top bar), then adjust font sizes, spacing, widths, container direction and visibility for that device. Values cascade from desktop down unless you override them. Custom breakpoints (Site Settings, Layout, Breakpoints) add views such as widescreen, laptop and mobile extra.
- Desktop values flow down to tablet and mobile unless overridden.
- Change container direction to stack items on mobile.
- Use smaller headings and padding on phones.
- Hide elements per device sparingly.
- Always check real phones, not just the preview.
What should you adjust for mobile?
| Setting | Typical mobile change |
|---|---|
| Heading size | H1 from 56px to around 32 to 36px |
| Padding | From 100px to 40 to 60px vertically |
| Container direction | Row to column |
| Widths | 50% columns to 100% |
| Images | Smaller height, object-fit cover |
| Visibility | Hide decorative extras |
Live 1-to-1 WordPress and Elementor lessons on your own site, from $40. Every lesson recorded. Beginners welcome.
What are common responsive mistakes?
Picture a designer who fixes the mobile layout by duplicating sections: one for desktop, a hidden copy for mobile. The page now loads everything twice and editing means changing both. Better: one section with responsive settings. Use hiding only for small decorative items. Also avoid fixed pixel widths; percentages and max-widths adapt better.
How do custom breakpoints work?
In Site Settings, Layout, Breakpoints, enable extra devices such as Laptop (useful around 1366px screens) or Mobile Extra. Each adds a view where values can differ. Start with the defaults and add only what you need. Read containers and Flexbox and responsive best practices.
Want to learn responsive Elementor design faster with a tutor?
I teach WordPress and Elementor 1-to-1 over Zoom or Google Meet, on your own website, at your pace. Lessons start at $40, every lesson is recorded so you can rewatch it, and you get a short checklist afterwards. Beginners, business owners, students and freelancers are all welcome. See lessons and prices or book a free intro call.
Frequently asked questions
How do I edit the mobile version in Elementor?
Switch to mobile view in the responsive mode bar and adjust settings; they apply only to mobile.
Why does my Elementor site look broken on mobile?
Usually fixed widths, oversized fonts and padding, or rows not switched to columns.
What are custom breakpoints in Elementor?
Extra device views such as laptop or widescreen, set in Site Settings, Layout, Breakpoints.
Should I hide sections on mobile?
Only small decorative items; duplicated sections slow pages and complicate editing.
Sources
Live 1-to-1 WordPress and Elementor lessons on your own site, from $40. Every lesson recorded. Beginners welcome.
More WordPress guides
Guide, 3 min readWordPress and Elementor Tutoring: Your Questions Answered
Guide, 3 min readWordPress Multisite Explained: Who Needs It (and Who Does Not)
Guide, 3 min readWordPress Comments and Spam: Settings That Keep Your Site Clean
Guide, 3 min readHow to Move WordPress to HTTPS (SSL) and Fix Mixed ContentRather have an expert run your WordPress site?
Tanvir H is a Bangladesh-based WordPress and Elementor web designer with 7+ years of experience, 650+ projects and a 4.9 client rating. New websites, redesigns, fixes, speed, security and SEO, handled by one expert who explains everything in plain English and works with clients worldwide.
