2.5Responsive & mobile preview
The essentials in 30 seconds
- A responsive site adapts its layout to the screen: three columns on desktop stack on a phone.
- Google indexes the mobile version first (mobile-first): responsive design is not optional.
- Check with the editor's device preview, then on a real phone: readable text, spaced buttons, images that do not overflow.
Running mini-case — the workshop on a phone
Samir looks at Hassan's site on his phone: the gallery overflows, a headline is huge and the contact button is glued to the edge. He understands that most of the workshop's visitors will arrive from a mobile, often through social networks. He reworks the responsive settings before delivery.
Sequel to case 2.4 — the homepage is composed, now checking on every screen.
1. Responsive and mobile-first
Responsive design automatically adapts the layout to the screen size: a single version of the site, readable on desktop, tablet and phone. Good themes handle this natively, but added content can break the adaptation — an image that is too wide, a table, a badly set column.
Google applies mobile-first: it indexes the mobile version of the site first. A site that is hard to read on a phone is therefore penalised, on top of driving visitors away. Samir treats mobile as the reference screen, not as an option.
2. Checking and fixing
The block editor offers a device preview (desktop, tablet, mobile) that shows the rendering without leaving WordPress. Some blocks offer per-device settings: hide an element on mobile, adjust a font size or stack columns. You then fix the classic defects.
The most frequent mobile problems: text too small, buttons too close together, overflowing images, columns that do not stack, an unreadable menu. After the preview, Samir tests on a real phone or with browser tools: the real test reveals what the preview hides.
🔎 Concrete example — Fixing the mobile gallery (Samir's case)
Problem: 3-column gallery overflowing on mobile.
1. Mobile preview: confirm the overflow.
2. Set the gallery to 1 column on mobile.
3. Reduce the hero headline on small screens.
4. Add spacing around the contact button.
→ Test on a real phone: OK.Result: a readable, comfortable page on mobile.
Lesson: the preview guides, the phone confirms.
Section vocabulary
- Responsive design
- Automatic adaptation of the layout to the screen size.
Simple example: the three collections stack on a phone.
What it is not: freezing a fixed width that overflows.
Reflex: one site, every screen.
- Mobile-first
- Google indexes and evaluates the mobile version of the site first.
Simple example: a site that is unreadable on mobile loses search visibility.
What it is not: testing only on desktop.
Reflex: mobile = reference.
- Device preview
- The editor's desktop/tablet/mobile buttons for seeing the rendering.
Simple example: Samir switches to mobile mode in the editor.
What it is not: publishing without ever looking at mobile.
Reflex: check before publishing.
- Per-device settings
- Block options that adjust size, columns or visibility depending on the screen.
Simple example: hide a decorative element on mobile.
What it is not: removing useful content for everyone.
Reflex: adapt, do not amputate.
- Common mobile defects
- Text too small, buttons too close, overflowing images, columns not stacked, unreadable menu.
Simple example: a contact button glued to the edge of the screen.
What it is not: ignoring these defects because desktop is perfect.
Reflex: hunt down these five defects.
In practice — Checking and fixing the mobile display
- In the editor, switch the preview to mobile mode.
- Hunt for defects: readability, buttons, images, columns, menu.
- Fix sizes and columns, test the hamburger menu.
- Check on a real phone or with browser tools.
Ready-to-say script — reassuring about mobile (20 s)
"Most of your visitors will arrive from a phone. I check every page on mobile: readable text, accessible buttons, photos that do not overflow. Google looks at this version first, so it is good for your visibility too."
Link mobile to the customer experience and to search visibility.
Copy-paste template — mobile check
PAGE TESTED: _______________
TEXT READABLE: yes / no
BUTTONS LARGE AND SPACED ENOUGH: yes / no
IMAGES WITHOUT OVERFLOW: yes / no
COLUMNS STACKED: yes / no
MENU USABLE: yes / no
TEST ON A REAL PHONE: yes / noPhoto gallery
One column on mobile, two on tablet, three on desktop.
Pricing table
Often unreadable on mobile: prefer stacked cards.
Heavy menu
Reduce it to the essential entries and check the hamburger menu.
Shop
Test the checkout flow on a phone, not just the homepage.
✓ Best practices
- Treat mobile as the reference screen.
- Use the device preview before publishing.
- Always confirm on a real phone.
✗ Common pitfalls
- Publishing without looking at mobile.
- Shrinking all the text to make the page fit.
- Disabling the theme's responsive behaviour.
Key takeaways
- Responsive design adapts the layout to each screen.
- Google indexes the mobile version first.
- The device preview guides the fixes.
- Testing on a real phone remains essential.
48h Challenge — apply tomorrow
Open three pages of your site on a real phone: note every defect (text, buttons, images, columns, menu) and fix at least three of them. 20 minutes.
- I check a page with the mobile preview.
- I fix common responsive defects.
- I test on a real phone before delivery.
Frequently asked questions
My theme is responsive, should I still check?
Yes. The theme provides an adaptive base, but the blocks, images and tables you add can break the display. A check page by page remains necessary.
How can I test without a phone?
Use the editor's mobile preview, then the browser developer tools (F12 → device mode). These tools simulate the size, but a real test is still preferable for readability and touch.
Does mobile-first also affect search visibility?
Yes: Google mainly indexes the mobile version. A site that is slow or unreadable on a phone may rank lower, on top of losing visitors.
The Collections page overflows on a phone. What is the right reflex?