In the media query for small screens I increased the % column width & reduced the font % size, which improved the overall look.
As a text book, it won't be read sequentially but the discography/personnel details need to have a clear layout.
I've now tested the book using Apple books on the ipad/iphone & they're acceptable but with 'Kindle for ios' (using Send to Kindle webpage & download app) I can't even get vertical space to show between the tables. I'm not sure if this is a problem with the delivery method I'm using, or a limitation of 'Kindle for ios'. So far I've tried:-
- specifying 'margin-top' / 'margin-bottom' separately in the CSS
- adding "!important" to the CSS
- using em & px spacing
- placing tables inside div tags with the CSS class applied to the div
- blank paragraphs with non-breaking space between tables
If I apply the CSS class to a para tag or a div tag own, then 'Kindle for ios' displays the vertical space correctly...
There's obviously other problems with the tables in 'Kindle for ios' but getting a space between them is pretty basic. Not sure what to do from here?
I've checked the book using Calibre's 'Check Book' option; Kindle Previewer's 'Quality Check'; ePubcheck cmd line; and W3CSS validation...
Thanks!
Ivor