Responsive Flip Card with flex and grid

Community feedback

• 

  turtlecrab•550

  @turtlecrab

  Posted about 3 years ago

  Using min-width is mobile first approach, it means that you first style your page for the small screen sizes, then add media queries with min-width for tablets, desktops, tvs(it could be 1 or more breakpoints).

  On the contrary, max-width is desktop first approach - you first style for the desktop screen size, then add media queries for smaller screens.

  I think mobile first is widely considered to be a better practice(google mobile first to read the arguments), but some people say that desktop first is easier and in some cases is more appropriate.

  My advice would be to try them both, do a solution here with one of the approaches and the next solution with another, then compare you feelings :)

  I personally did one solution here with desktop first, my motivation was to match the final design comparison screenshot as close as possible, and because it's a desktop screenshot I started with designing for that. But mobile first feels smoother to me, it's easier for me to first focus on basic stuff and smaller screen and then build up on that.

  00