Custom width example in the Document website is not working

[anothertempore]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

---

The Custom Width demo in the document website, its related CodeSandBox link is not working.

document website: https://react-swipeable-views.com/demos/demos/#custom-width CodeSandBox: https://codesandbox.io/s/p7xmzmop3x

[vanhoutenbos]

Hi,

Can you explain what exactly is not working? When I open both links I can swipe without issue. I also do need see any errors in the console about problems.

[anothertempore]

When I swipe the codesandbox link, the slide is not centered.

[vanhoutenbos]

Ah! I know what you mean now, I believe this is done on purpose so that the viewer knows there are slides to the right/left, but I think you can overwrite this by padding on the left side, I will try and find some time tomorrow to make a demo!

[anothertempore]

@jeanpoelie Thanks for your quick response :)

The problem is that the code in these two links is same, but the result is not the same. On the website, the slide is centered. on the CodeSandBox, the slide is not centered. I wanna know why this happens.

[vanhoutenbos]

Ah! I will need to test this and see why this is happening

[bunnywrote]

It seems also to have problems with any library version later than 0.13.3

https://codesandbox.io/s/p7xmzmop3x

[vicasas]

@jeanpoelie this problem still exists, any solution?

[dmgauthier]

I struggled with this problem for hours now without any solution.

Solved: That was indeed pretty simple, I work on an app with basic CSS already implemented for so long now I completely forgot about box-sizing

Adding this to my style made everything right.

html,
body {
[...]
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}