Common Improve Flow Prompts

These prompts are examples you can use for solving common issues with experiments.

Using Add Context

Crucial Step: Before using these prompts, it might be useful to click the "Add Context" button in the editor and select possilbe relevant elements. This gives Dalton the context it needs to apply these fixes correctly.

1. Center multiple items vertically

Use this when multiple items, like text, badges or icons don't line up properly on the same line.

Copy-paste prompt:

"Apply display: flex and align-items: center to the container to vertically center the children on the same baseline."

2. Center buttons horizontally

Use this when buttons are not centered in their container.

Copy-paste prompt:

"Set justify-content: center on the parent flex container to align these buttons horizontally in the middle."

3. Stack elements on mobile

Use this when elements look good side-by-side on desktop but need to stack on mobile.

Copy-paste prompt:

"On mobile, use flex-direction: column and align-items: center to stack and center these elements. On desktop, keep them in a row."

4. Add breathing room inside a container

Use this when content is touching the edges of its container.

Copy-paste prompt:

"Add padding to the container so the content doesn't touch the edges. Use standard spacing values found elsewhere on the site."

5. Add space between items

Use this when items in a list or row are too close together.

Copy-paste prompt:

"Increase the gap property of the flex/grid container to add more space between these items. Match the spacing used in similar sections."

6. Add space below an element

Use this when an element is too close to the section below it.

Copy-paste prompt:

"Add margin-bottom to this element to separate it from the section below. Use a standard spacing value from the site's design system."

7. Make an element full width

Use this when an element should span the entire width of its container but doesn't.

Copy-paste prompt:

"Force this element to span the full width. If it's in a grid, use grid-column: 1 / -1. If it's in a flex container, set width: 100%."

8. Make a banner edge-to-edge

Use this when a banner needs to break out of its parent container to touch the screen edges.

Copy-paste prompt:

"Make this banner edge-to-edge. Use the :has() selector to target the parent container and make it full width."

9. Constrain width to match page

Use this when an element is too wide and needs to match the standard page width.

Copy-paste prompt:

"Constrain this section to the standard page width. Match the site's container width and use margin: 0 auto to center it."

10. Stack grid items on mobile

Use this when a grid layout needs to become a single column on mobile.

Copy-paste prompt:

"Change the grid layout on mobile: set grid-template-columns: 1fr so each card takes up the full width of the row."

11. Bring an element to the front

Use this when an element (like a popup or badge) is hidden behind other content.

Copy-paste prompt:

"Set position: relative (or absolute) and increase the z-index to ensure this element appears on top of other content."

12. Make a button sticky at the bottom

Use this when you want a CTA to stay visible at the bottom of the screen while scrolling.

Copy-paste prompt:

"Apply position: sticky and bottom: 0 to make this button stick to the bottom of the viewport. Add a z-index to keep it above other content."

13. Make text readable on dark backgrounds

Use this when text is hard to read against a background.

Copy-paste prompt:

"Change the color to white (or a light shade) and add a subtle text-shadow to increase contrast against the background."

14. Make buttons easier to tap on mobile

Use this when buttons are too small for touch screens.

Copy-paste prompt:

"Set min-height: 44px and min-width: 44px on the button to meet accessibility touch target standards."

15. Prevent text from overflowing

Use this when long text is getting cut off or spilling out of its container.

Copy-paste prompt:

"Set overflow-wrap: break-word and word-break: break-word to prevent long text from overflowing the container."

---

Using Add Context for Container Issues

The "Add Context" button is a UI tool in the editor that lets you click on elements on the page to provide additional context. When fixing container or layout issues, click "Add Context" and select the parent container element or a similar element that has the correct styling. This helps the AI understand the layout structure and apply the correct fix. Look for common container class names in the HTML when selecting elements.