How do you make a food ordering app responsive in a machine coding interview?
Use a media query: @media (max-width: 768px) { .main { flex-direction: column; } .cart-sidebar { width: 100%; } }. This stacks the menu and cart vertically on mobile. Use grid with auto-fill for the menu items.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in Food Ordering App: UI Layout and CSS
Header (logo + cart count), controls (search + filters), main area split into menu grid (left) and cart sidebar (right). Use flexbox for the main layout and CSS grid for menu items. Add responsive design (stack vertically on mobile).
CSS grid with auto-fill: grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)). This creates a responsive grid that adjusts the number of columns based on available width. No media queries needed for the menu itself.
Keep a count of items in the cart: Object.values(cart).reduce((sum, qty) => sum + qty, 0). Update a span in the header on every cart change. This gives quick visual feedback.
Still have questions?
Browse all our FAQs or reach out to our support team