correctly setting up the layout

[Ginso]

Hello,
i am developing a game, but i'm still pretty inexperienced with the frontend(If anyone is interested in doing that for/with me, contact me).
At the moment i'm trying to setup the basic layout in a way, that it will work on different screen sizes.
At the top i want to have an area for the hand cards.
Below i want to have the board. It is quadratic and i think 800x800px is a suitable size for monitors.
on the right side of the board, i want 3 big cards: 1 at the top, 1 at the center and 1 at the bottom.
If you start the game watergate in studio, you can see, how it's supposed to look like.
My problem is, that when i start decreasing the width of the window the 3 cards become hidden before it starts scaling everything.
Can anyone give me an example of how the tpl file (and css styles) should look like to achieve this layout properly?

[tsaunat]

Not a particularly great front-end person myself, so hopefully you'll get better responses than mine.

First I want to say off the shrinking that the board is doing is an emulation that's done by the browser (the browser pretends the board as 800px big, but it's fitting it fully visible in a smaller (say 500px) screen, and that worries me a bit, but may turn out to be be fine.

What you want to do to get the same effect for the cards as the board is apply a min-width to the div that contains both (I got reasonable look with min-width:1150px;

The div to apply it to is the one with the inline-flex display.

[Victoria_La]

Do you want scaling of everything or you want responsive layout? BGA framework does some scaling itself to certain extend. What current min/max size did
you set in game info?

[Ginso]

ah the gaminfos thanks for that hint. Setting the min width there did the trick