0

I have a bunch of card divs inside a flex container. When clicked the card should scale to be full screen (not fully fill the container, but really full screen, relative to the body/html).

If the devices width is smaller than its height the card should also rotate(90deg).

I tried this: http://codepen.io/anon/pen/ENyVzm

I think setting the width and height is not gonna work, since it will disrupt the flex layout. I should instead scale the card to be fullscreen. Scale does not affect the flex layout as it only renders the visual representation and not the flow.

For that to work the card must be rendered (when in non-full screen mode) in the same aspect ratio as the device since we can only scale one factor and not scale width and height individually.

Are my thoughts correct or is there an easier way to accomplish that?

philk
  • 2,009
  • 1
  • 23
  • 36
  • for the full-screen part, have you seen this: http://stackoverflow.com/questions/8338736/triggering-full-screen-in-browser-with-javascript ? – proPhet Nov 14 '16 at 17:09
  • I not actually not mean fullscreen but within the browsers chrome. – philk Nov 16 '16 at 12:28

0 Answers0