I use this in my CSS. Which works brilliantly.
@media screen and (max-width: 320px) {
tw-story { font-size: 75%;
width: 256px;
}
}
@media screen and (max-width: 360px) {
tw-story { font-size: 76%;
width: 288px;
}
}
@media screen and (max-width: 480px) {
tw-story { font-size: 79%;
width: 338px;
}
}
@media screen and (max-width: 568px) {
tw-story { font-size: 81%;
width: 345px;
}
}
@media screen and (max-width: 640px) {
tw-story { font-size: 84%;
width: 351px;
}
}
@media screen and (max-width: 720px) {
tw-story { font-size: 86%;
width: 356px;
}
}
@media screen and (max-width: 768px) {
tw-story { font-size: 87%;
width: 360px;
}
}
@media screen and (max-width: 800px) {
tw-story { font-size: 88%;
width: 375px;
}
}
@media screen and (max-width: 896px) {
tw-story { font-size: 90%;
width: 420px;
}
}
@media screen and (max-width: 900px) {
tw-story { font-size: 90%;
width: 422px;
}
}
@media screen and (max-width: 1024px) {
tw-story { font-size: 93%%;
width: 480px;
}
}
@media screen and (max-width: 1280px) {
tw-passage { width: 600px;
}
}
@media screen and (max-width: 1360px) {
tw-story { font-size: 102%;
width: 619px;
}
}
@media screen and (max-width: 1366px) {
tw-story { font-size: 103.36%;
width: 620px;
}
}
@media screen and (max-width: 1440px) {
tw-story { font-size: 103%;
width: 638px;
}
}
@media screen and (max-width: 1600px) {
tw-story { font-size: 107%;
width: 675px;
}
}
@media screen and (max-width: 1680px) {
tw-story { font-size: 108%;
width: 694px;
}
}
@media screen and (max-width: 1920px) {
tw-story { font-size: 113%;
width: 750px;
}
}
Now if I add the following, suddenly the left margin disappears when I play the story.
@media screen and (max-width: 2560px) {
tw-story { font-size: 125%;
width: 1200px;
}
}
How can I fix this?