Given a modern page with three columns, I'd like the following in each column: a little bit of text and a button below it, with both the text and button centered.

If each text block has two lines of text, then the buttons line up across the page. However, if I view the page on a different size monitor, the text may wrap at a different place, resulting in perhaps one text block being three lines and the other having two lines of text. This means that the buttons are no longer vertically aligned with each other. Here's an example:

enter image description here

On a wider screen, the text in the third column doesn't wrap, and all the buttons are lined up.

I could put the buttons in their own section. However, on a small screen, this means that the buttons will be pushed further down the page together, and will no longer be associated with their text.

Any suggestions on this basic formatting issue?

  • I don't have any real experience developing for Modern pages, and I understand that it can be difficult to get javascript solutions to work, but what about CSS? Seems to me you could get the effect you want by using flexbox to push the button all the way to the bottom and the text to the top, that way your wrapping text will be wrapping into "empty" flexible space and not affect the placement of the button. Here's a guide on CSS Tricks. Mar 31, 2020 at 21:45
  • No custom css on modern, unless it's via deployed customization, which I do not have permission to do in this environment.
    – Mike2500
    Apr 1, 2020 at 12:20


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.