OK, I'll add the extra classes. I will try to make a release today.

Thanx alot!!

Done in 3.4.2. The CSS classes that specify the chess pieces is now completely separated from the CSS classes that define the size of the sprites, and there is no inlined "background-position" instructions left.

This is REALLY better than i hoped :) . With very little css code you do it perfectly!!!!!
Thx a lot. Now its mobile friendly too.

uichess-chessboard-square, .uichess-chessboard-cell {min-width: 53px! important; width: 53px !important; height: 53px !important;}
.uichess-chessboard-sprite60 { width: 53px !important; height: 53px !important; background-position:  -850px   0px !important;  }

so if i want to "map" the 60px board to the 53px, just do that, plus copy the background-position from the 53px background position and redefine the sprite60 via a new rule. Just perfect and simple

Hey Buffos and Yoann,

today I discovered that the plugin works nicely on an iPhone 6, but when you look at the chessboard on a iPhone 5 or older one (smaller screen) the h-file is missing.
Changing the boardsize in the settingsmenu of the plugin doesn't solve the problem.

Is this something you both managed to fix by using the css code as mentiod by Buffos above?
And if yes can you please explain me how to use this code? I know where to insert it, but I don't understand the values in the example code from Buffos. Right now I've set the size to 35 pixels per square in the plugin settings menu because that looks nice on a desktop. What should my corresponding css code be for correcting the missing h-file on a mobile phone?

Thank you both very much for your answer!

Hi,
To hack the size square on a small screen device, you can use this type of CSS code:

@media screen and (max-width: 320px) {
    .uichess-chessboard-square29,
    ...
    .uichess-chessboard-square63,
    .uichess-chessboard-square64 {
        min-width: 28px; height: 28px;
    }

    .uichess-chessboard-sprite29,
    ...
    .uichess-chessboard-sprite63,
    .uichess-chessboard-sprite64 {
        width: 28px; height: 28px; background-position: -138px -37px;
    }
}

In plain English, the meaning of this code is: for a device whose screen width is less than 320 pixels, square size will be clamped to 28 pixel, whatever the other settings. You can adapt this code to set up different screen-width and/or max-square-size thresholds.

For your information, the CSS classes uichess-chessboard-squareXX target the squares, while uichess-chessboard-spriteXXtarget the chess piece images, and in both cases, XX corresponds to the square size requested by the user. The cryptic background-position: -138px -37px; instruction comes from uichess-chessboard-sprite28: if you want to set up a max square size threshold different than 28 pixels, you will have to adapt the background position offset accordingly.

Hey Yoann,

thanks!
I tried using your code on my website by simply copy-pasting it into the right place, but when looking on an iphone 4 with a resolution of 960x640 it didn't solve the problem. Then I changed the max-width value in your code from 320 to 640 and even 650 but still no result.
That's strange, because when the max width is exeeded the code should make sure that every square is set to 28 pixels. There are 8 squares on the board so 8 x 28 = 224 pixels wide so that should fit easily on an iPhone 4 screen. But still the h-line is partly cut off in my case.

Am I missing something?

Hum, from what you report, I'm surprised it does not work. I have no iPhone, so I cannot test by myself. Maybe you try to replace @media screen ... with @media all ..., but I'm don't think this would solve the problem.

What is the address of your website?

@novindi

Did you try my css code above?
You just have to replace 2 numbers. The 60 i use for the sprite since this is the default size i use at my site (and write down YOUR default board size). If you inspect a table cell you will see the uichess-chesboard-squareNN class you have to redifine
The second is the TARGET (53px in the code above)
If you want to map the previous (default) square size (60 in my code above) to a 30px square size, just replace 53 in the code above to 30. Thas all.

Hey guys, sorry for my late response. The webpage I'm talking about is www.http://schaaktrainer.nl/schaakpartijen/
In the settings of the plugin I've set the squaresize to 35 pixels. After that I implemented the code from Buffos like this to make the squares 30 pixels:

uichess-chessboard-square, .uichess-chessboard-cell {min-width: 30px! important; width: 30px !important; height: 30px !important;}
.uichess-chessboard-sprite35 { width: 30px !important; height: 30px !important; background-position: -850px 0px !important; }

As you can see on the webpage the pieces don't fit in the squares anymore so my guess is that I'm doing something wrong here.

Also on an iPhone 4 the board still doesn't fit on the 960x640 screen. That's strange anyway because 8 x 35 pixels = 280 pixels so in theory there could be two chessboards next to each other because that's still less then 640 pixels, but in reality one board doesn't fit.

I'm confused because I've tried everything to make this work.
Hope you can help me out heren, many thanks!

Change the background position with the correct one (you will find it in the css of the plugin)

if you look at that css, the background value for 30px is

-67px -35px !important

Just change -850px 0px !important; to that and it works fine (i checked it)

Great Buffos, many thanks!

I've just released a new version of the plugin (3.5), that provides integrated support for small-screen devices through media queries (see in the settings page).

By the way, CSS classes have changed in this version: what used to be .uichess-chessboard-spriteXX or .uichess-chessboard-squareXX is now .uichess-chessboard-sizeXX. As a consequence, you must update your custom CSS codes to keep them working with this new version.