[RbnJrg]

Originally Posted by kaza

I'm trying to put together an epub of a verse novel, and its in sort of a two column layout where the main text is on the left and some stanzas have a little explainer in a second column to the right. I would like it to be readable on smaller screens such that the explainers appear on the right if the screen is large enough, and otherwise appears below the stanza its' attached to, like in the attached pictures. i've seen books in the wild that use tables for plays but they always keep both columns and just shrink them when the screen gets smaller rather than moving one column below the other. looking around online it seems like media querries might work but i can't find any examples to copy.

On epub3 you have grids to get that effect. Try this:

1. In your .css stylesheet:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(100px, 40vw), 1fr));
  gap: 5px;
  justify-content: space-evenly;   
}

.item {
  box-sizing: border-box;
  border: 1px solid blue; /* you can delete this if you wish */
  text-align: center; /* change the alignment as you wish */
}

2. In your .xhtml file:

<div class="container">
  <div class="item">item-a</div>
  <div class="item">item-b</div>
</div>

Reduce the width of the window of your ereader to see how the code works.