file preview in editor responds to media queries

rjwse@aol.com · 06-17-2026, 01:11 PM

I have been using calibre's "viewer" to evaluate media queries which respond to total width of entire screen. I would first view narrow (as for phone) then widen the "viewer" (as for a wide tablet). I never noticed it before, but to my delight the editor's "file preview" also functions as though it were the entire screen! It is easier for me now to double check response narrow/wide just in the editor and I do not even have to open the "viewer."

kovidgoyal · 06-17-2026, 08:50 PM

Yes editor preview is a browser basically, so media queries work.

rjwse@aol.com · Yesterday, 09:07 AM

Thanks for that. I have an addendum. This works well for bare images for iphone. It does not work if a bordered div contains an image and its caption — it will float left. I looked it up and there is a bug:
"The Kindle app on iOS (iPhone and iPad) has a long-standing, notorious CSS bug: it frequently ignores margin: 0 auto; on div containers if those containers house images. While the app respects text-align: center; directly on an <img> tag, it strips the auto-margins from a parent block, snapping the whole div container to the left."
There are kludgy work-arounds offered, neither working at for me. One of them requires wrapping the image and caption in a P tag, but that does not work either.

06-17-2026, 01:11 PM	#1
rjwse@aol.com Addict Posts: 356 Karma: 2581190 Join Date: Dec 2013 Location: LaVernia, Texas Device: kindle epub readers on iphone and kindle cloud reader	file preview in editor responds to media queries I have been using calibre's "viewer" to evaluate media queries which respond to total width of entire screen. I would first view narrow (as for phone) then widen the "viewer" (as for a wide tablet). I never noticed it before, but to my delight the editor's "file preview" also functions as though it were the entire screen! It is easier for me now to double check response narrow/wide just in the editor and I do not even have to open the "viewer." Attached Thumbnails

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
smarten punctuation in file preview of tag-editor	rjwse@aol.com	Editor	11	09-07-2023 12:44 PM
I clicked on the X in the Editor File Preview Window	HappyCalibreUser	Editor	8	01-31-2022 11:29 AM
File preview out of sync with editor	Phssthpok	Editor	6	06-01-2018 11:09 AM
TWO OPF files or something like Media Queries in the OPF file for KF8 and MOBI?	DHahn	Kindle Formats	3	04-17-2012 04:06 AM

06-17-2026, 08:50 PM	#2
kovidgoyal creator of calibre Posts: 46,324 Karma: 29630876 Join Date: Oct 2006 Location: Mumbai, India Device: Various	Yes editor preview is a browser basically, so media queries work.

Yesterday, 09:07 AM	#3
rjwse@aol.com Addict Posts: 356 Karma: 2581190 Join Date: Dec 2013 Location: LaVernia, Texas Device: kindle epub readers on iphone and kindle cloud reader	Thanks for that. I have an addendum. This works well for bare images for iphone. It does not work if a bordered div contains an image and its caption — it will float left. I looked it up and there is a bug: "The Kindle app on iOS (iPhone and iPad) has a long-standing, notorious CSS bug: it frequently ignores margin: 0 auto; on div containers if those containers house images. While the app respects text-align: center; directly on an <img> tag, it strips the auto-margins from a parent block, snapping the whole div container to the left." There are kludgy work-arounds offered, neither working at for me. One of them requires wrapping the image and caption in a P tag, but that does not work either.

Advert