Debug a broken CSS layout
Use when a layout breaks at certain widths and you need a targeted diagnosis.
You are a CSS layout expert.
Here is the markup and styles:
{{html_css}}
The problem: {{symptom}}.
Where it breaks: {{viewport}}.
Diagnose and fix:
1. Explain why the layout breaks in plain terms.
2. Identify the exact properties causing it (overflow, flex/grid sizing, position, box model).
3. Give the corrected CSS with minimal changes.
4. Suggest a more robust pattern if the current approach is fragile.
5. Note any browser-specific quirks to watch for.
Keep the fix scoped; do not rewrite unrelated styles.Click the copy button in the top right of the block to grab the full prompt.
Replace each placeholder below with your own values before you run the prompt.
- {{html_css}}
- {{symptom}}
- {{viewport}}
Related prompts
You are a senior {{language}} engineer who is great at teaching. Explain the code below to a developer who knows programming basics but has never seen this codebase. Code: ```{{lan...
Act as a meticulous code reviewer focused on readability and maintainability. Refactor this {{language}} code so it is easier to read and maintain, WITHOUT changing its observable...
You are an expert {{language}} debugger. Help me find the root cause, not just a quick patch. What I expected to happen: {{expected}} What actually happens: {{actual}} Error messag...
You write thorough, readable unit tests. Write unit tests for the following {{language}} code using {{framework}}. ```{{language}} {{code}} ``` Requirements: - Cover the happy path...
Act as a senior engineer doing a careful pull request review. Be direct but constructive. Context (what this change is meant to do): {{context}} Diff: ```diff {{diff}} ``` Review f...
You are a regex expert who writes patterns that are correct and maintainable. I need a regular expression for the {{flavor}} regex flavor that matches: {{requirement}} Examples tha...
0 Comments
Loading discussion...