[RbnJrg]

Originally Posted by kaza

thanks, that worked. is there any way to tell readers to prioritize moving the 2nd box under the first one rather than creating line breaks? or if not can i set a suggested minimum size for one of the boxes?

I don't understand you very well. By default, the second box will go under the first one when the width is not enoug to contain both boxes.

also i guess since koreader is an epub2 reader (i thought its worked with any epub3 features ive come across but either i was mistaken or its just a subset of epub3) and the 2nd box displayed under the 1st its good and i dont need to dive into media querries.

Why not media queries? You can have the best of both worlds. By the way, ADE 4.x. although is an ereader that supports epub3, it doesn't support "grid", so you need some other solution there. The best and simpler solution is by using "grid" but also you can use "flex-box" but you need to write more code. A simple an complete solution with grid, that uses media-queries, is the following:

1. In your .xhtml file write:

  <div class="container">
    <div class="mainColumn">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo. Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui.</div>

    <div class="secondColumn">Donec tellus augue, tempus sed facilisis sed, fringilla quis leo.</div>
  </div>

2. In your .css file:

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: 1fr; /* by default, one column */
  gap: 10px;
}

.mainColumn {
  text-align: left;
}

.secondColumn {
  text-align: left;
  font-size: 0.9em;
  font-weight: 600;
  padding-left: 16px;
}

/* Media query for wider screens */
@media (min-width: 300px) { /* Change to the width of your wishes */
  .container {
    grid-template-columns: 2fr 1fr; /* When the screen is wider than 300px, 2 cols */
  }
}

So when the width of the screen is lower than 300px, the layout will be of the only one column; otherwise, two columns.

But also you can have the same output by mean of flex-box. The code is a bit more complex:

1. In your .xhtml file:

  <div class="container">
    <div class="mainColumn">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo. Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui.</div>

    <div class="secondColumn">Donec tellus augue, tempus sed facilisis sed, fringilla quis leo.</div>
  </div>

So, the .xhtml is the same no matter if you employ grid or flex-box.

2. In your .css stylesheet:

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.mainColumn {
  flex: 70%;
  text-align: left;
  padding-bottom: 10px;
}

.secondColumn {
  flex: 30%;
  text-align: left;
  font-size: 0.9em;
  font-weight: 600;
  padding-left: 16px;
}

@media (max-width: 300px) { /* Change the width you want here */
  .mainColumn, .secondColumn {
    flex: 100%;
  }
}

Both solutions work fine; here you have some screenshots:



Below I attach an epub with the complete solution so you can understand better the code. OF COURSE, THIS IS ONLY FOR EPUB3, it won't work under epub2.