Answers.Body: <p>Most epub reading systems do not respond to media queries, so it's going to be hit or miss. You could try putting the sidebar styles first in your CSS, so that in the cascade on systems that don't understand media queries, the sidebar styles will get overwritten by the more general column styles, but no guarantees it will work.</p>
  
  <p>Even on tablets, sidebars may be problematic at high font sizes: just like with tables, if the end of the sidebar does not fit on the current page, it will not continue onto the next page--it will just run off the bottom of the screen.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-09T18:29:17.930Z
Answers.Text: I say this as someone who hasn't tested sidebars recently. But Kindle's media queries work just fine, and there's no reason to think it couldn't support a responsive sidebar.  This article suggests that ibooks supports media queries https://medium.com/@sandersk/responsive-ebook-design-a-primer-8bba01328219
Answers.UserDisplayName: idiotprogrammer
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-09T19:20:23.963Z
Answers.Text: The question was about Epub 3 specifically though, not Kindle. I haven't actually tested media queries in iBooks for a year or two; if Sanders says they're working now, I'm content to believe him. As a side note, Kindle media queries are fairly limited: there just let you select KF8 or mobi.
Answers.UserDisplayName: Tom
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-10T15:28:51.610Z
Answers.Text: media queries work for iBooks on iPad currently
Answers.UserDisplayName: maxwell
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-08T14:29:41.590Z
Answers.LastActivityDate: 2015-07-08T14:29:41.590Z
Answers.UserDisplayName: Tom
Answers.Body: <p>I think it's definitely possible -- especially on ibooks, Kindle, and Google Play (and probably some others). (See this article about writing media queries to differentiate between different devices: <a href="https://medium.com/@sandersk/responsive-ebook-design-a-primer-8bba01328219" rel="nofollow noreferrer">https://medium.com/@sandersk/responsive-ebook-design-a-primer-8bba01328219</a> ) </p>
  
  <p>The question then becomes: what should the ebook look like for smaller displays? And do you need to have a sidebar? </p>
  
  <p>A lot of sidebar content can just be made into a box that is a block rather than inline element. Oreilly books have lots of these explanatory boxes, and readers are used to reading them as separate from the text. </p>
  
  <p>The most common use for sidebars (for me at least) was inserting an inline  graphic or a pullquote. With high resolution displays, inline graphics are now doable but as recently as 2 years ago it made little sense to include a graphic if it takes up 40% of screen width because the text to the side of it looked awful. My problem with putting graphics in sidebars is that I couldn't figure out if  whether Android devices required low resolution graphics or whether -- like Kindle -- accepted high res graphics which it would downconvert depending on the intended device.  (See my still unanswered question here: <a href="https://ebooks.stackexchange.com/questions/5996/interior-image-requirements-for-non-kindle-distributors-do-they-downconvert">Interior Image requirements for non-Kindle distributors &amp; devices with retina displays?</a> )</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-09T18:43:55.470Z
Answers.LastActivityDate: 2015-07-09T18:43:55.470Z
Answers.LastEditDate: 2017-04-13T13:00:05.480Z
Answers.UserDisplayName: idiotprogrammer
Body: <p>Is there a way to create a responsive sidebar in EPUB3, for example there would be a sidebar in tablet view but if the EPUB was viewed on a mobile it would become one column?</p>
  
Tags: <epub>
Title: Is it possible to create a sidebar in a reflowable EPUB3?
UserDisplayName: Paul
ThreadText: # Is it possible to create a sidebar in a reflowable EPUB3?
  
  (Asked by: username_0 on 2015-07-08)
  
  Is there a way to create a responsive sidebar in EPUB3, for example there would be a sidebar in tablet view but if the EPUB was viewed on a mobile it would become one column?
  
  **Tags:** epub
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2015-07-08. Score: 1
  
  Most epub reading systems do not respond to media queries, so it's going to be hit or miss. You could try putting the sidebar styles first in your CSS, so that in the cascade on systems that don't understand media queries, the sidebar styles will get overwritten by the more general column styles, but no guarantees it will work.
  
  Even on tablets, sidebars may be problematic at high font sizes: just like with tables, if the end of the sidebar does not fit on the current page, it will not continue onto the next page--it will just run off the bottom of the screen.
  
  > **Comments:**
  > **username_2**: I say this as someone who hasn't tested sidebars recently. But Kindle's media queries work just fine, and there's no reason to think it couldn't support a responsive sidebar.  This article suggests that ibooks supports media queries https://medium.com/@sandersk/responsive-ebook-design-a-primer-8bba01328219  
  > **username_1**: The question was about Epub 3 specifically though, not Kindle. I haven't actually tested media queries in iBooks for a year or two; if Sanders says they're working now, I'm content to believe him. As a side note, Kindle media queries are fairly limited: there just let you select KF8 or mobi.  
  > **username_3**: media queries work for iBooks on iPad currently  
  
  ---
  
  ### Answer by username_2 on 2015-07-09. Score: 0
  
  I think it's definitely possible -- especially on ibooks, Kindle, and Google Play (and probably some others). (See this article about writing media queries to differentiate between different devices: <https://medium.com/@sandersk/responsive-ebook-design-a-primer-8bba01328219> )
  
  The question then becomes: what should the ebook look like for smaller displays? And do you need to have a sidebar?
  
  A lot of sidebar content can just be made into a box that is a block rather than inline element. Oreilly books have lots of these explanatory boxes, and readers are used to reading them as separate from the text.
  
  The most common use for sidebars (for me at least) was inserting an inline graphic or a pullquote. With high resolution displays, inline graphics are now doable but as recently as 2 years ago it made little sense to include a graphic if it takes up 40% of screen width because the text to the side of it looked awful. My problem with putting graphics in sidebars is that I couldn't figure out if whether Android devices required low resolution graphics or whether -- like Kindle -- accepted high res graphics which it would downconvert depending on the intended device. (See my still unanswered question here: [Interior Image requirements for non-Kindle distributors & devices with retina displays?](https://ebooks.stackexchange.com/questions/5996/interior-image-requirements-for-non-kindle-distributors-do-they-downconvert) )
  
  
  ---
  
  