Thet Hmuu
Caleb's Blog

Caleb's Blog

CreaThit Class: Week 05 - Responsive Design

CreaThit Class: Week 05 - Responsive Design

collection of links for external reads

Thet Hmuu's photo
Thet Hmuu
·Jul 19, 2022·

1 min read

'width' and 'max-width'
css-tricks.com/tale-width-max-width

Flexbox complete reference
css-tricks.com/snippets/css/a-guide-to-flex..

Reference for CSS selectors
w3schools.com/cssref/css_selectors.asp

Correct way to do CSS breakpoints
freecodecamp.org/news/the-100-correct-way-t..

Suitable breakpoints for different screen sizes

  'small'
  'sm': '640px',
  @media (min-width: 640px) { ... }

  'medium'
  'md': '768px',
  @media (min-width: 768px) { ... }

  'large'
  'lg': '1024px',
  @media (min-width: 1024px) { ... }

  'Extra large'
  'xl': '1280px',
  @media (min-width: 1280px) { ... }

  '2x Extra large'
  '2xl': '1536px',
  @media (min-width: 1536px) { ... }
 
Share this