You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have a container element of width 600px which could support a board with 8 squares of 75px. Yet the board is only 592px wide with squares of 74px.
Looking at the code i noticed...
// calculates square size based on the width of the container
// got a little CSS black magic here, so let me explain:
// get the width of the container element (could be anything), reduce by 1 for
// fudge factor, and then keep reducing until we find an exact mod 8 for
// our square size
function calculateSquareSize () {
var containerWidth = parseInt($container.width(), 10)
// defensive, prevent infinite loop
if (!containerWidth || containerWidth <= 0) {
return 0
}
// pad one pixel
var boardWidth = containerWidth - 1
while (boardWidth % 8 !== 0 && boardWidth > 0) {
boardWidth = boardWidth - 1
}
return boardWidth / 8
}
... a fudge factor of 1pixel. Or something like that. Why is this? Wouldn't it be cleaner if the board fits the container completely if possible. Could you please change this behaviour?
The text was updated successfully, but these errors were encountered:
I'm experiencing the same. The slight margin is very noticeable on some sizes. When I make the viewport smaller, the extra margin gradually disappears then reappears once it hits some point, maybe the width of mod 8 from the code above.
I have a container element of width 600px which could support a board with 8 squares of 75px. Yet the board is only 592px wide with squares of 74px.
Looking at the code i noticed...
... a fudge factor of 1pixel. Or something like that. Why is this? Wouldn't it be cleaner if the board fits the container completely if possible. Could you please change this behaviour?
The text was updated successfully, but these errors were encountered: