1.5Responsive: mobile & tablet
The essentials in 30 seconds
- Responsive = the page adapts to the screen size (desktop, tablet, mobile).
- Elementor has a per-device preview: you set per breakpoint (desktop / tablet / mobile) without breaking the others.
- You can hide/show an element by device and adjust sizes, spacing, order.
Through-line — Nadia tests on a phone
On a desktop, the joiner's home page is perfect. On Nadia's phone, the banner overflows and the 3 projects cram together. She discovers the mobile preview: she shrinks the titles, stacks the cards, and hides a decorative element useless on a small screen. The site becomes readable everywhere.
Last step of level 1 — a site that doesn't work on mobile doesn't work.
1. Preview and breakpoints
Elementor offers a responsive preview: a bar to switch between desktop, tablet and mobile. Settings made in a mode apply to that breakpoint (and smaller ones) without breaking the others: you can shrink a heading size only on mobile.
Nadia switches to mobile mode and adjusts: the banner moves to a column (thanks to the wrap seen in 1.1), titles shrink, paddings tighten. The preview shows her the real rendering.
2. Hide, reorder, test
In the Advanced → Responsive tab, you can hide/show an element by device (e.g. hide a large decorative image on mobile) and sometimes change the order of elements. You also adjust sizes and spacing per device.
Golden rule: actually test on a phone, not only in the preview. A non-responsive site loses the majority of visitors, who often come from mobile.
🔎 Concrete example — Making the home page readable on mobile (Nadia's case)
Mobile mode (preview):
- banner: switches to a column (wrap), full-width button
- titles: reduced size
- 3 projects: stacked (one column)
- decorative image: hidden on mobile
→ Then test on a real phone.Result: a site readable on all screens.
Lesson: set per device + test for real.
Section vocabulary
- Responsive
- A page's ability to adapt to the screen size.
Simple example: the banner switches to a column on mobile.
What it is not: a frozen page that overflows on a small screen.
Reflex: think mobile from the design stage.
- Breakpoint
- The screen threshold (desktop, tablet, mobile) at which you apply specific settings.
Simple example: shrink the heading size only on mobile.
What it is not: thinking a mobile setting also changes desktop.
Reflex: set in the mode = set that breakpoint (and smaller).
- Per-device preview
- The desktop/tablet/mobile toggle to see and set the rendering per screen.
Simple example: Nadia switches to mobile to adjust the banner.
What it is not: judging only on the desktop screen.
Reflex: always check the 3 previews.
- Hide / reorder
- Show or hide an element by device, and sometimes change its order.
Simple example: hide a large decorative image on mobile.
What it is not: keeping heavy, useless elements on mobile.
Reflex: on mobile, keep the essentials.
- Real test
- Check the rendering on a real phone, not only in the preview.
Simple example: Nadia opens the site on her phone before delivering.
What it is not: delivering without ever testing on mobile.
Reflex: before delivering, open on a real mobile.
In practice — Adapting a page to mobile
- Switch the preview to mobile mode.
- Reduce the heading sizes and tighten the paddings for mobile.
- Check that blocks stack (wrap) and hide the useless on a small screen.
- Test the page on a real phone before validating.
Ready-to-say script — reassuring the client about mobile (20 s)
"Most of your clients will find you from their phone. So I've adapted the site for mobile: readable text, a clearly visible call button, lighter images. I tested it on a real phone, not just on the computer, to make sure everything is crisp."
Put mobile forward as a commercial priority.
Copy-paste template — responsive check
MOBILE PREVIEW: titles reduced? paddings tightened?
BLOCKS: stack correctly (wrap)?
ELEMENTS HIDDEN ON MOBILE (useless): _______________
BUTTONS: big enough, readable with a thumb?
TEST ON A REAL PHONE: done / to do
TABLET CHECKED: yes / noMobile-first
Design for mobile first, then widen: avoids nasty surprises.
Call button
On mobile, a clearly visible "tel:" button: contact in one tap.
Images
Lighten and possibly hide decorative images on mobile (performance).
Tablet
Don't forget the tablet: often in between, to check too.
✓ Best practices
- Set per breakpoint (mobile without breaking desktop).
- Hide the useless on a small screen.
- Test on a real phone before delivering.
✗ Common pitfalls
- Judging only on the desktop screen.
- Letting the banner overflow on mobile.
- Keeping heavy/useless images on mobile.
Key takeaways
- Responsive = the page adapts to the screen.
- Set per breakpoint (desktop/tablet/mobile).
- Hide/reorder by device.
- Actually test on a phone.
48h challenge — apply tomorrow
Take a page, switch to mobile preview, shrink the titles, check that blocks stack, hide a useless element, then open the page on your phone. Note one flaw fixed. 20 minutes.
- I set the display per breakpoint.
- I hide the useless on mobile.
- I test on a real phone before delivering.
Frequently asked questions
Does a mobile setting also change the desktop?
No: a setting made in mobile mode applies to mobile (and smaller screens) without changing the desktop. That's the whole point of breakpoints.
Can I hide an element on mobile?
Yes: in Advanced → Responsive, you can hide/show an element by device. Handy to lighten mobile (decorative images, secondary blocks).
Is the preview enough to validate mobile?
It helps, but you must always test on a real phone: font sizes, buttons tappable with a thumb, real loading speed.
The home page is perfect on desktop but the banner overflows on mobile. What's the right reflex?