Wrong icon size for smaller screen width

[YoussefE123]

First off, thank you for this simple and self-hosted captcha ! So, while testing the responsiveness of this captcha, it works ok for a screen width of 350px or more, but when decreasing the screen width below 350px, the icons don't fit inside the container, which makes the selection impossible ! I already found a simple fix in the css file by simply adding background-size:100% to .iconcaptcha-holder .iconcaptcha-modal__body-icons,.iconcaptcha-holder .iconcaptcha-modal__body-selection{width:100%;max-width:320px;margin:0 auto;} .

I feared that the click won't be recognized when the icons get resized, but the existing code already takes care of the image width via the function determineClickedIcon($clickedXPos, $clickedYPos, $captchaWidth, $iconAmount) in the captcha.class.php file, as long as the image doesn't get resized after requesting new icons.

Also, some font-size changes are needed in the css file for screen width below 300px.

[fabianwennink]

Hi @YoussefE123. I'm aware that the current version doesn't really scale nicely on smaller devices. This is something that I have planned to address in the next major release version of IconCaptcha. As the generated image itself is 320 pixels wide, resizing the captcha will make the image appear blurry. I will probably generate a different size challenge (maybe 2 rows instead of 1 row?) for smaller devices instead of just resizing the image, but I'm not sure about this yet.

[YoussefE123]

Hi @fabianwennink, I think 1 row is better to keep things simple, because 2 rows or more will require the number of icons to be a multiple of the rows (2 rows >> 3x2 = 6 icons, 4x2=8, etc.), so users won't be able to select any number they want without breaking the captcha symmetry.

I agree that resizing makes the image blurry, but I think it's still ok down to about 200px. What I noticed on the other hand, is that because of rotating/flipping icons, some of them look almost identical ! so maybe you should select more distinguishable icons.

I was using version 2 before, and one thing I liked about v3 is the reduction in the number of requests to generate the icons (from 5 to just 1). In fact, I had to adjust my "anti-ddos" system configuration, to allow the captcha to request 5 times the same resource in such a small time-frame !

This said, I noticed that the option security.invalidateTime only works before selection, and once the "verified" message is displayed, it stays there indefinitely ! I think it should reset after some time via another option maybe.

[YoussefE123]

I just thought maybe you can generate the image in svg instead of png ? because svg preserves image clarity for smaller screens, then replace header('Content-type: image/png') with header('Content-Type: image/svg+xml').