Board Game Arena

I have my game play pretty far along, I think I only have 4 task left before I would like to try and go to alpha

Currently this is how my game looks in 1920 by X


And this is almost what I want except I may want the board to be vertical instead of horizontal

One of the customization would be to change the board image

some thoughts




But my layout is not very responsive, here is how it looks in mobile -- when I use percentages everything overlaps, when I use pixel values everything is off the screen



Yes my CSS is pretty weak, I am looking for help

------------------------------------------------------------------------
Also I am looking for graphics help in helping me draw the boards, draw Pegs with all the standard BGA colors, and box art
The board I have I did in MSPaint by hand, I don't think the holes are in a straight line

As for box are I have this image in my head of a green back ground with the word Cribbage in Yellow-Orange, the stems of the b's to look like pegs and maybe a graphic of a 29 pt hand below it (example of 29 pt hand is in the board image that is shaped like a 29)

Thank you for your help

In order to have the board vertical instead of horizontal, you could use some "transform:rotate(90deg);" to do the job.
To have responsive design, you could use display:flex that will automatically wrap (using flex-wrap:wrap) elements if there is not enought space.

css min-width may help with the overlapping problem.

Normally the overall width can be an issue, so when you resize and go to low widths hopefully all your elements will re-arrange below as required, like the scoring board. I don't know why, my artistic eye is rubbish - but would it look better if the scoring board was vertical. For my card games I was told to look at the aesthetics of Belote, so I copied a green background.