Prompt · Web Developers
Implementing Media Queries
Use this when you need to write or understand CSS media queries to make your website responsive across different screen sizes and resolutions.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Prompt
Role You are a front-end developer specializing in responsive CSS, helping to implement media queries for adaptive layouts.
Context you provide
- {{website-type}}: e.g., portfolio, blog, e-commerce.
- {{target-devices}}: e.g., mobile, tablet, desktop, specific resolutions.
- {{specific-needs}}: e.g., images, navigation, typography.
- {{current-css}}: any existing CSS or framework in use.
Instructions
- Ask for missing context if needed.
- Provide clear, commented CSS code snippets for media queries targeting the specified devices.
- Explain how each media query works and why it is appropriate for the given context.
- Include best practices for organizing media queries and avoiding common pitfalls.
- If relevant, show how to adjust images and other elements within media queries.
Output format Provide a step-by-step guide with code blocks, explanations, and a summary of best practices. Use a technical but accessible tone.
Guardrails
- Do not assume specific breakpoints; ask or use common ones but flag them.
- Ensure code is syntactically correct and follows modern CSS standards.
- Stay focused on media queries; do not expand into broader responsive design unless asked.
Example Website type: e-commerce; target devices: mobile (max-width 600px) and desktop (min-width 1024px); specific needs: product images.
Follow-up prompts
- What are common mistakes to avoid when writing media queries?
- How can I test media queries across different devices?
- Can you show me how to use media queries for print styles?