-2

Is it possible to make my web app more responsive by placing content in a flexbox such that two cells are side-by-side when viewed on larger displays, but then have both of these elements centered in a single column in the viewport when viewed on smaller screens (i.e., mobile devices)?

For example,

  1. On larger screens/viewports it should look like this:

on large screen it should look like this

  1. On smaller screens/viewports (i.e., mobile) it should look like this:

on small mobile screen it should look like this

Thank you all. I can't figure it out.

fourpastmidnight
  • 4,032
  • 1
  • 35
  • 48
Andrij
  • 218
  • 2
  • 8
  • "I can't figure it out" ain't much to work with. What have you tried? – Thomas Jun 26 '23 at 08:54
  • use `display: grid`. add `@media` rules to change the grid template accordingly – Martin Jun 26 '23 at 09:51
  • You can use `flex-wrap` so that the two elements break into sperate rows as soon as they don't fit anymore next to each other. No need for `grid` or `@media` queries. But I'm still waiting for some effort from OP. – Thomas Jun 26 '23 at 11:12

1 Answers1

0

Use a media-query

@media (max-width: 600px)

and set

flex-direction: column
Clausmon
  • 46
  • 7