Resolutions of images are not responsive on mobile devices

[sayakpaul]

Description

• Document source: https://github.com/sayakpaul/portfolio/blob/master/posts/flow_optim.qmd
• Quarto version is 1.4.542
• I am using 15.6 macOS.

While the webpage renders perfectly fine on my laptop and on other computers, the resolution of the images in the webpage isn't adjusted correctly (meaning they are not responsive) for mobile devices. Is that expected?

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? The goal is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

Also, please upgrade to the current stable version which is 1.7.33.

This being said, your favourite browser developer mode is there precisely to help you debug these things as you can change the display to be a small one and look at the HTML/CSS.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code block (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[sayakpaul]

I switched to using the Quarto way of doing images:

![Outline of the text-to-image generation process with Flux.1-Dev.](https://huggingface.co/datasets/sayakpaul/sample-datasets/resolve/main/optimizing_flow/image1.png){#fig-overview}

The caption doesn't seem to be aligned with the image. This was one of the reasons why I resorted to using <img>.

[sayakpaul]

I could resolve that issue with #7003. However, I cannot customize "Figure 1" (I want to make it bold).

Maybe there are ways to do that in Quarto but it's just a bit easier to do it in pure HTML.

[mcanouil]

There are issues/discussions about this:

• lua filter for modifying "Figure 1" caption titles #3273

FYI, the issue to track this enhancement:

• A few suggestions for cross referencing and text layout #1095

---

Regarding your earlier question, if you want to use pure HTML, then you need to add the right CSS classes/styles.
As a reminder, Quarto uses Bootstrap.

[sayakpaul]

Thanks!

Also, switching to Quarto way of doing images actually fixes responsiveness issue.