Goal first, layout second

Give the developer two actions and exact test sizes

The safest route is to ask the developer or website-builder support team to change only one page's mobile first screen. Do not begin by arbitrarily shrinking type: first decide which action is primary and which alternative is genuinely useful.

Workflow from backup and selection of two actions to first-screen layout and testing on several phones
Backup → two actions → mobile layout → size and function checks.

Message for the developer

Please improve the mobile first screen of: [URL].
Primary action: [for example, “Call and order”].
Alternative action: [for example, “Send an enquiry”].

Both actions must be clear and available before the first scroll
at the agreed phone sizes. The primary action must have stronger
visual emphasis. Do not hide the essential heading, reduce
readability or allow widgets to cover the actions.

Save the current version first. Afterwards provide before/after
captures and test both actions.

Prepare

  • the exact URL, not only the domain;
  • one primary and one alternative action;
  • mobile analytics data, when available;
  • a backup of the template, styles and builder settings;
  • current first-screen captures on a small and medium phone.

Implementation order

  1. Record the original state and confirm that rollback works.
  2. Remove first-screen elements that do not explain the offer or support an action.
  3. Reduce excessive top spacing, image height and secondary copy without losing meaning.
  4. Place the primary CTA first and give it stronger emphasis than the alternative.
  5. Keep comfortable tap areas and spacing between actions.
  6. Test a short viewport, enlarged text, an open menu and appearing banners.
  7. Activate both actions and confirm the original paths still work.

Technical notes

  • Use responsive Grid or Flexbox rather than absolute positions for one phone.
  • Do not force 100vh when content may not fit; consider 100svh where appropriate.
  • Respect env(safe-area-inset-*) for fixed controls.
  • Do not make body copy difficult to read merely to fit a button.
  • Recheck visible focus, contrast and tap area after CSS changes.
  • A fixed CTA must not cover a form, consent banner or system navigation.
.hero-actions {
  display: grid;
  gap: .75rem;
}

@media (min-width: 30rem) {
  .hero-actions { grid-template-columns: 1fr 1fr; }
}

Rollback and separate work

If copy is clipped, elements overlap or an action stops working, restore the saved version and repeat one change at a time. Rewriting the offer, repairing a form, analytics setup, complete mobile adaptation and loading-speed work are separate services.

After implementation, perform the independent first-screen check.