Figure layout breaks at mobile width

[lbm364dl]

Description

The closest related discussion I found was #13202 (from the title) but it was probably unrelated. I couldn't find anything better.

For a newly created Quarto blog with quarto create project blog myblog, try to render this:

::: {#fig-my-figure layout-nrow=1}

Image 1

Image 2

Image 3

Caption

:::

What I see up to a normal size (expected):

What I see for widths smaller than I believe 767.98px:

I would expect the layout to still work, by showing all three parts in the same row, shrinking space between them if necessary, but they certainly fit into a single row.

Questions:

1. Is this expected behaviour? For me it is not.
2. If I want to find out the CSS styles that are applied by default, where should I look in the source code? Upd: I guess I should start here? TOC and links to other formats are only visible in wide desktop view #5961 (comment). I was also interested in that issue, and it shares the 'something doesn't work on mobile breakpoint'.

PS: Using Quarto 1.7.33

[mcanouil]

The best approach for everything HTML/CSS related is to open the HTML in your favourite browser, right click, choose "inspect" and use the developer mode to look at the CSS rules and HTML structure.
Then come up with the rule you think is better.

Note that in Bootstrap, the usual/default is to stack elements on small display.
Having three images in one row on mobile is usually awful.

[cscheid]

This is indeed intended behavior; in our judgment the column layout is a less important concern than the integrity of the content.

In the future, we envision Quarto documents having greater control over the output generated at different media query breakpoints. But in the meantime, we do intend this to be default behavior of column contents.

(You're always welcome to emit raw html blocks and custom styles that completely take over the appearance, of course!)

[lbm364dl]

Thanks for your replies. I was actually trying to migrate a raw GitHub pages blog to Quarto so I wanted to try to use the figure layout feature to simplify things, but I guess I will stick to the raw html blocks I already had to match my expected layout.

Just as a follow-up, I think layouts might often be used with small images, so having more than one image per row might not necessarily look bad in small devices. This was my original example on mobile, with each image being just 70x70 px:

Looking forward to seeing greater control options in the future!

[mcanouil]

You can always define a custom CSS class and rule to add to tweak the layout.

[lbm364dl]

Great! Turns out what I wanted is easily achievable and I can only blame my own inexperience. This works as expected:

:::: {#fig-my-figure}

::: {style="display: flex; justify-content: space-around;"}

Image 1

Image 2

Image 3

:::

Caption

::::

Small screen:

Thanks for guiding me!

Upd: If anyone reads this, if the images don't have the same size originally, that might not give the result you expect. If you need each one to fit the same space, you might need to wrap each one in a div (What does flex: 1 mean?):

::::: {#fig-my-figure}

:::: {style="display: flex; justify-content: space-around;"}

:::{style="flex: 1;"}
Image 1
:::

:::{style="flex: 1;"}
Image 2
:::

:::{style="flex: 1;"}
Image 3
:::

::::

Caption

:::::

[cscheid]

Thanks for the followup. Can you share the .qmd you're using and the output it generates? I don't think we'll be able to change this in the near future, but it would be good to record your setup for posterity, when we take on responsive documents.

[lbm364dl]

If you mean for the example of five small images above: .qmd, .html
An example with different image sizes that needed the individual divs: .qmd, .html
The outputs can also be seen in the post.

If you think it's relevant, I'm also willing to contribute with a PR adding a small subsection somewhere in Figures - Quarto so that other people don't become confused and know how to build their own workarounds.

[mcanouil]

FYI, there is the CSS Grid from bootstrap that is documented: https://quarto.org/docs/output-formats/page-layout.html#css-grid