Fencing
MJP Fencing & Retaining
Full-width hero over a real timber fence, with the quote path up top.
Layout reference
Device pairing, fixed.
The cramping comes from the mobile screenshot being absolutely positioned over the desktop one. It crops the desktop, it needs a shadow ring to stay legible, and it breaks completely under 900px. The fix is a two-column grid where neither image touches the other.
Correct — featured build
Two columns · aligned to a shared baseline · no overlap
Desktop · 1180 × 649
Mobile · 470 × 728
Both images fully visible. Bottom edges align. Nothing is cropped, nothing needs a shadow to separate it, and it stacks cleanly on a phone.
Correct — second example
Desktop
Mobile
Wrong — what's on the site now
The phone covers the bottom-right of the desktop shot — usually where the call button and service list sit, which is the part worth showing. It also needs a thick ring to stay readable, and it sits outside the container so it clips on narrow screens.
Grid builds — desktop only
Don't pair every build. Showing two devices twenty times is what makes the page feel crowded. Pair three or four featured builds; everything else is a single desktop shot.
Concreting
Adelaide Concrete & Civil
Jobsite hero and a captioned gallery of real pours.
Plumbing
Holland Plumbing & Gas
Service areas clear, real job gallery, contact bar that follows you down the page.
The rules
1. Never position a device screenshot absolutely over another one.
2. Two columns: desktop takes the remaining width, mobile is a fixed 210px.
3. align-items:end so both sit on the same baseline.
4. Under 900px, stack — desktop first, mobile beneath at 190px.
5. Pair only featured builds. Everything else is desktop only.
6. Every image gets an explicit aspect-ratio so nothing jumps while loading.