micheledallatorre/mws-restaurant-stage-1

Design index.html page

Opened this issue · 1 comments

micheledallatorre commented

ToDo:

  • add viewport definition <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • add favicon?
  • add charset utf-8 so that Unicode characters get recognized
  • responsively show restaurant cards (using flex)
micheledallatorre commented

Breakpoints (see #4) for this page:

  • <400px Layout
    • set nav bar to min-height
    • center h1
    • fix filtering buttons layout: no overlapping
    • decrease the font-size of the restaurant name
    • decrease font-size for restaurant address and make it italic
    • make images smaller
    • fit restaurant list item into the layout (do not overlap)
  • 400px+ Layout
    • display Filter Results h2 and select buttons on the same line