Responsive HTML templates. Build a website your customers can comfortably browse on their phone and computer.
Choose a layout for your real content, then inspect it at narrow and wide browser sizes. Check navigation, image crops and longer text before publishing your version.
Sample designs · replace the fictional content with your own.
AI ChatWorkflow example
Observed checks
You
Show how to check this project at phone, tablet and desktop widths.
AI · example response
I can open the project at 390, 768 and 1440 CSS pixels and look for overflowing text, image crops and menu problems. After your edits, we should check your own version rather than assuming the original screenshots cover it.
Check phone, tablet and desktop
Open phone and desktop views
Look at the headline, image crop, menu and main button in both sizes.
Describe the visible issue
Tell AI which screen has the problem and provide a screenshot, such as text cut off or too much blank space.
Check the corrected preview
Repeat the same actions at both widths and on the published website.
Next: open the changed page on the devices your visitors use.
Illustrative conversation, not a live AI session.
01 / Observed checks
What was checked in this Relayline version?
Relayline was opened at phone, tablet and desktop widths: 390, 768 and 1440 CSS pixels. In those browser checks, the page stayed within the screen without horizontal overflow. The screenshots below show that version; repeat the check after adding your own text and images.
Source and conditions
Current package 14080be0…13ca · checked 2 October 2026. Desktop viewport overrides, not physical phones; browser version was not exposed.
What the run covers
Original layout and image loading, pointer opening, keyboard Escape, dialog progression and focus return. It is not full accessibility or whole-catalogue certification.
Relayline original · 1440 × 900 desktop viewport · same current packageRelayline original · 768 × 900 desktop viewport · same current packageRelayline original · 390 × 900 desktop viewport · same current package
02 / Layout candidates
Which layouts deserve a closer inspection?
Choose a layout whose image frames and text areas fit your planned content, then open it on a phone and desktop. Try a long headline, a real photo and the menu. The previews let you compare layouts before you decide which one to adapt.
Relayline
Product explanation with a three-tile introduction and detailed navigation to inspect.
Current download inspected on 2 October 2026. Confirm the selected files on the product page.
index.html
RECREATE.md
assets/vyne-clay-glass-still-life.png
assets/vyne-cobalt-editorial.png
assets/vyne-ivory-portrait.png
Some resources may load from external URLs. Review the selected project before publishing.
Sample designs · replace the fictional content with your own.
AI ChatWorkflow example
Long text & tall image
You
The portrait is cropped too much on my phone. Keep the whole face visible without changing desktop.
AI · example response
Send the screenshot and say which width has the problem. I can adjust the CSS for the headline, spacing or image crop at that width while keeping the desktop layout you want. Then we can compare both previews.
Adjust the phone layout
Open phone and desktop views
Look at the headline, image crop, menu and main button in both sizes.
Describe the visible issue
Tell AI which screen has the problem and provide a screenshot, such as text cut off or too much blank space.
Check the corrected preview
Repeat the same actions at both widths and on the published website.
Next: open the changed page on the devices your visitors use.
Illustrative conversation, not a live AI session.
03 / Long text & tall image
What happened with longer text and a tall image?
In a separate test copy, a longer headline wrapped without pushing the page outside the screen. A portrait image was cropped differently at different widths. You can ask AI to adjust wrapping and image fit for your own content; the screenshots show why those details need a preview.
Your decision
Original package
Changed test copy
390 × 900
No page-wide horizontal overflow observed.
Longer heading wrapped; the first portrait was hidden by the existing CSS.
768 × 900
No page-wide horizontal overflow observed.
The tall portrait was cropped into a 236 × 236 square with cover.
1440 × 900
No page-wide horizontal overflow observed.
The tall portrait was cropped into a 460 × 460 square with cover.
Relayline test copy · 1440 × 900 · longer heading and 1:3 portrait; not the customer ZIPRelayline test copy · 768 × 900 · longer heading and 1:3 portrait; not the customer ZIPRelayline test copy · 390 × 900 · longer heading and 1:3 portrait; not the customer ZIP
AI ChatWorkflow example
Use the controls
You
Check the menu, details and Escape after these responsive changes.
AI · example response
I can check each menu link and detail window. I will look for the correct section target, closing behaviour and return to the opening control. If a project needs its own shareable link, we can add a separate HTML page.
Make the menu and details usable
Follow the menu
Check that the selected section appears without being covered by the header.
Open and close details
Check the close button, Escape and return to the project button.
Add an address if needed
Ask AI for a separate project page when someone should be able to share its own link.
Next: repeat the menu and detail actions on phone and desktop.
Illustrative conversation, not a live AI session.
04 / Use the controls
Can visitors use the menus and details?
In the checked Relayline version, the menu and detail window reacted to clicks, and Escape closed the window. For your website, open the menu, follow a link and close the details on the devices you will use. Ask AI to correct any control that stops working after an edit.
01
Menu
Open it, follow a link and confirm that the selected section is visible.
02
Details
Open a project window and test its close button and Escape.
03
After edits
Repeat on phone and desktop, and give AI the screenshot if a control needs repair.
AI ChatWorkflow example
Adjust then check
You
Reduce the hero gap on phones and keep the desktop spacing.
AI · example response
Send the screenshot and say which width has the problem. I can adjust the CSS for the headline, spacing or image crop at that width while keeping the desktop layout you want. Then we can compare both previews.
Adjust the phone layout
Open phone and desktop views
Look at the headline, image crop, menu and main button in both sizes.
Describe the visible issue
Tell AI which screen has the problem and provide a screenshot, such as text cut off or too much blank space.
Check the corrected preview
Repeat the same actions at both widths and on the published website.
Next: open the changed page on the devices your visitors use.
Illustrative conversation, not a live AI session.
05 / Adjust then check
Can I refine spacing with my AI?
Yes. Tell AI what looks too tight or too large and at which screen width: for example, reduce the hero gap on phones without changing desktop. Ask for a preview at both widths. You can tune spacing and font sizes to your own text instead of accepting the initial layout unchanged.
See the prepared template example
›_ AI editing exampleFormwell
You
Adjust the section spacing while keeping the existing content and visual style.
AI · example response
The prepared Formwell example changes layout spacing. Recheck your own headings, images, controls and narrow views after any edit.
Prepared conversation and project versions. No live AI connection.
AI ChatWorkflow example
Motion & resources
You
Compress the large images and reduce the animation without removing any content.
AI · example response
I can inspect image sizes and animation rules. Ask for compressed images and reduced motion where it distracts from reading. We can then open the page to check image quality and whether the controls still work.
Fix large images and distracting motion
Inspect media
Identify oversized images and the animations you want changed.
Ask for the adjustment
Resize and compress images, and reduce or remove the selected motion.
Preview the result
Look for sharp images, readable text and working controls.
Next: check the public website with the updated files.
Illustrative conversation, not a live AI session.
06 / Motion & resources
What about animation, loading and missing resources?
If images load slowly, ask AI to resize and compress them; if motion is distracting, ask it to reduce or remove it. Check that every image and font is reachable after publication. The Relayline check confirmed image loading in that run, but did not measure speed, offline use or reduced-motion support.
Website files + design instructions
Images
Ask AI to resize and compress large pictures and confirm every image loads online.
Motion
Ask to reduce or remove animations you do not want on your own website.
Resources
Check the published page for missing images or fonts and ask AI to fix the paths.
AI ChatWorkflow example
Choose then retest
You
Help me check my edited website on phone, desktop and the public hosting address.
AI · example response
Send the screenshot and say which width has the problem. I can adjust the CSS for the headline, spacing or image crop at that width while keeping the desktop layout you want. Then we can compare both previews.
Check the website before publishing
Open phone and desktop views
Look at the headline, image crop, menu and main button in both sizes.
Describe the visible issue
Tell AI which screen has the problem and provide a screenshot, such as text cut off or too much blank space.
Check the corrected preview
Repeat the same actions at both widths and on the published website.
Next: open the changed page on the devices your visitors use.
Illustrative conversation, not a live AI session.
07 / Choose then retest
What should I confirm before I publish?
Check your edited website on a phone and desktop: headings, image crops, menu, buttons and contact. Then open the public version after deployment and repeat the same actions. If something differs from the preview, give AI the screenshot and ask it to fix that specific issue.
The inspected package gives you a concrete layout to assess. Retest your own content and published version before relying on the original observations.
OneDollarStock is implementing a project to prepare the platform for entry into the German market under the “Go Global” acceleration track of the “Unicorn Hub Startup Booster” programme, project no. FENG.02.28-IP.02-0013/23. The project is co-financed by the European Funds for Smart Economy 2021–2027 under the priority “Innovation-friendly environment”, Measure FENG.2.28 Startup Booster Poland.
Learn more about the project →
