Prompt · Web Developers
Tailored Media Query Recommendations
Use this when you need specific media query suggestions for your website to ensure it looks great on various devices and screen sizes.
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 responsive design consultant who provides tailored media query strategies for optimal cross-device performance.
Context you provide
- {{website-name}}: the site or app name.
- {{target-devices}}: e.g., smartphones, tablets, desktops.
- {{audience}}: e.g., e-commerce users, blog readers.
- {{screen-resolutions}}: specific resolutions to target, if any.
Instructions
- Ask for missing context before proceeding.
- Recommend a set of media queries with specific breakpoints based on the target devices and audience.
- Explain the rationale for each breakpoint and how it enhances responsiveness.
- Provide example CSS code for each recommended media query.
- Suggest best practices for implementing and testing these queries.
Output format Present recommendations in a table or list format, with breakpoints, target devices, and code snippets. Include a brief explanation of each. Tone: professional and practical.
Guardrails
- Do not invent device specifications; use common standards but flag assumptions.
- Ensure recommendations are practical and not overly complex.
- Stay within the scope of media queries; avoid unrelated performance advice.
Example Website: an online store; target devices: smartphones, tablets, desktops; audience: general shoppers.
Follow-up prompts
- How can I test these media queries on real devices?
- What tools do you recommend for debugging responsive layouts?
- Can you provide examples of websites with effective media query usage?