Check out Chess with Different Armies, our featured variant for July, 2024.

[ Help | Earliest Comments | Latest Comments ]
[ List All Subjects of Discussion | Create New Subject of Discussion ]
[ List Earliest Comments Only For Pages | Games | Rated Pages | Rated Games | Subjects of Discussion ]

Single Comment

Hannibal Chess with Gryphon and Falcon. Expansion for hannibal chess. (10x9, Cells: 90) [All Comments] [Add Comment or Rating]
🕸Fergus Duniho wrote on Thu, Jan 4 02:32 AM UTC in reply to Fergus Duniho from 02:04 AM:

The solution that seems to be working is to use this CSS without a container query:

  #board0 TD {
    aspect-ratio: 1 / 1;
    width: min(10vw, 9vh, 54px) !important;
    height: min(10vw, 9vh, 54px) !important;

Instead of setting the height to auto, this just sets width and height to the same value. Instead of giving a single value for height and width, it uses the minimum of three different values. The first two are in viewport units. The viewport is normally 100vw wide and 100vh tall. Since there are 10 files and 11 ranks, the largest possible square width that will let the board fit on the screen is 10vw, and the largest possible square height that will let the board fit on the screen is 9.090909090909091vh, which I have rounded down to 9vh. Taking the minimum of these and the desired size gives the best size for displaying the board on the screen. On both my Android phone and the iPhone, the board is now displaying at a small enough size to remain visible on the screen in both portrait and landscape, and it is sticking close to a 1/1 aspect ratio for the spaces.