How would you build a layout that looks good on both a phone and a wide desktop screen? Talk me through your approach.

What the interviewer is looking for

• This question tests css & responsive layout. Uses flexbox and grid confidently, designs mobile first, handles cross-browser quirks, and keeps styles maintainable.
• Strong answers: Mobile first thinking, flexbox or grid, relative units, media or container queries, flexible images, and testing at several sizes.
• Likely follow-up: How would you handle a component that needs a completely different arrangement on mobile?

Another way it may be asked: You're given a design for a product card grid. How do you make it work on a small phone and a big monitor?

A structure to follow: Frame, structure, analyse, recommend

1. Step 1

   Frame

   Restate the goal and ask what success is and what the constraints are.

2. Step 2

   Structure

   Split the problem into a few separate parts you can check one by one, and say what you will look at first and why.

3. Step 3

   Analyse

   Reason with the information you have, state your assumptions out loud, and say what data would change your mind.

4. Step 4

   Recommend

   Give a clear recommendation, the main risk, and the first step you would take.

This is guidance on shape, not a script. Use your own real experience and facts; never invent details to fill a gap. See the STAR guide and answer frameworks.

Common slips

• Listing ideas without choosing between them.
• Hiding assumptions instead of stating them.
• Finishing without a recommendation.

How to practise it

Answer in four spoken parts, one per step, then check you ended on a recommendation.

Related questions

• Tell me about a tricky styling bug, like something breaking in only one browser, and how you solved it.
• Can you explain what happens when you await a promise in JavaScript, and how you handle errors from it?
• What are some simple things you do to make sure a form can be used by someone on a screen reader or only a keyboard?
• How do you decide where a piece of state should live in a React or similar app, and when do you reach for a global store?
• A product page feels slow to load on mobile. How would you find out why, and what would you try first?

Browse all questions