My project is a word search game. I initially used CSS flex to position the elements which looks good until the viewport is smaller than the width of the fixed sized divs.
I’m not sure bootstrap would work as if my game tiles start dropping down to different rows it would be too difficult to play.
What I think would be best is if when the viewport is shrunk is the left bar stacks on top of the game div, and the “actionBar” stacks underneath it. As the game area width is set at 400px if the viewport is made smaller than this than I would like to resize the gameContainer and gameSquare fixed widths to a smaller size (in a similar fashion as media queries work for font size).
I’m not too sure how I could go about doing this. Anyone able to shed some light? http://codepen.io/doug20000/pen/KWQYaB