My daughter came home with a poem she wrote at school, and it was so cute that I decided to create an online flip book out of it. I wanted it to be completely responsive so it would look like a book on any screen size, which wasn’t easy when two pages have different content side by side. How I resolved this issue is explained below.
I set the style using div tags. See the picture showing the initial style display set. The first left/right is set display: block and the rest are set display: none.
Responsive Difficulties Solved
Since I’m essentially working with two side by side boxes representing my pages, I need them to be exactly the same size, and they need to remain the same size regardless of the viewing screen size. I have an image on the right and I played around with setting font size and padding using many different combinations of CSS units. I even tried setting breaking points, but this didn’t give me total size continuity. At some screen size point, the box sizes were off. I solved this by using images exactly the same size on both pages. This way both pages grow and shrink at exactly the same rate and are always the same size.