Make headings and spacing fit phone screens on a block theme
Headings too big and gaps too wide on mobile? Adjust font sizes and spacing in the global styles as a draft, compare on a phone screen, then publish.
- Difficulty
- Intermediate
- Time
- about 15 min
On phones, my site's headings look huge and there is too much empty space between sections. Take screenshots of [pages, e.g. the home page and the about page] on mobile, then read the global styles and prepare a draft with [what, e.g. headings that scale down on small screens and tighter space between sections]. Desktop should look about the same as now. Send me screenshots of the draft preview on mobile and desktop, and publish only after I approve.
Already connected?
If SAR is already in your AI app, this is enough:
Draft smaller headings and tighter spacing for phones in my global styles and show me before and after.
What happens
- The AI app takes mobile screenshots of the pages as they are now, as the 'before'.
- It reads the global styles: font sizes, spacing and layout widths, and the theme's defaults.
- It saves a draft with the new sizes and spacing and a signed preview link; visitors see nothing new.
- It takes screenshots of the preview on mobile and desktop so you can compare them with the 'before'.
- Publishing changes every page, so it is approved in SAR with your password, and it can be undone.
Approvals involved
Worked out from the tools this recipe uses.
sar_screenshot_pageScreenshot a pageNonewordpress_get_global_stylesGlobal stylesNonewordpress_save_global_styles_draftSave a global styles draftNonewordpress_publish_global_stylesPublish the global styles draftApproval and password
What you get
Pages that read comfortably on a phone, without making the desktop version worse.
Related recipes
- Design & builders · about 15 minChange your block theme's colours and fonts as a draftSet new site-wide colours, fonts and sizes in the Site Editor's global styles as a draft, see them on a preview link, then publish with your password.
- Design & builders · about 30 minFix what an automated accessibility check finds on your key pagesScan up to four pages for accessibility problems, then fix missing alt text and weak colour contrast with drafts and approvals. It is a scan, not a certification.
- Design & builders · about 25 minBuild an Elementor landing page as a draftDescribe the page you need and get a full Elementor layout in a draft page, with a preview link, before anything goes live.
Try it on your own site
Install the plugin, add SAR to your AI app and paste the prompt. Free to start.