Support » Theme: Twenty Nineteen » “Stack on mobile” option for floated images?

  • I like the “Stack on mobile” option under “Media & Text Settings” for the Media & Text block. How can I modify Twenty Nineteen to give me that option also on floated images in a Paragraph block?

    Medium to large floated, text-wrapped images — say, 300px width or more — that work fine on desktop tend, on mobile, to squeeze the text alongside them to a skinny column of just a few characters; even worse if the text starts with a drop cap. (I’m migrating a very large older website to Twenty Nineteen, and it is full of such situations.)

    To be sure, for each of those floated images, I can open “Advanced” in its Image block and add a CSS class — say, “stack-on-mobile”, with code like this in my child style.css:

    @media (max-width: 600px) { 
      div.stack-on-mobile, div.stack-on-mobile > figure, div.stack-on-mobile > figure > img { width: 100%; } }

    (No doubt one or two of those elements is redundant, but it works.)

    Rather than typing (and mistyping) a class name over and over, however, I’d like to be able to just click a “Stack on mobile” switch on any Image block that would insert the class, just as clicking that switch in a Media & Text block inserts the class .is-stacked-on-mobile (which I know works differently, by changing the grid-column-widths for the two media and text columns from 50% to 100%).

    Any suggestions? This must be a common problem, but I can’t find that anyone else has asked this question yet.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You are asking for a theme to have something to do with the content while in the editor. This is not the theme’s job and it isn’t involved when you add images to a post or when you change old ones. If you really want control over the images through the editor, it would be a change to the editor, so it could work with all themes.

    The place to request a feature for the editor is https://github.com/WordPress/gutenberg/issues/

    Understood. Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.