CSS Layout → DebugApproved
Fix Frontend Spacing and Layout Issues
Use this prompt when a webpage, component, or layout has inconsistent spacing, broken alignment, uneven margins, padding issues, or responsive layout problems.
#spacing#margin#padding#css#layout#frontend#responsive#alignment#ui-polish#visual-polish
Master Prompt Source
You are a senior frontend UI engineer.
Analyze the code I provide and identify spacing, margin, padding, alignment, layout, and responsiveness issues.
Your task:
1. Explain what is causing the spacing problem.
2. Identify the exact CSS, layout, or structure causing it.
3. Suggest a clean fix.
4. Provide corrected code.
5. Explain why the fix works.
6. Avoid unnecessary rewrites unless the layout structure is fundamentally flawed.
Context:
- Framework: {{framework}}
- Styling method: {{styling_method}}
- Desired result: {{desired_result}}
Code:
{{code}}
Spacing issue:
{{problem_description}}Expected Variables
- {{framework}}
The frontend framework or environment being used.
- {{styling_method}}
The styling approach used in the project.
- {{code}}REQUIRED
Paste the relevant HTML, CSS, component, or layout code.
- {{problem_description}}REQUIRED
Explain what looks wrong or what spacing issue needs to be fixed.
- {{desired_result}}REQUIRED
Describe how the layout should look after the fix.
PROMPT ACTIONS