Simple flowing/rewrapping text box (newbie)

I’m stuck trying to get text to rewrap as the page width increase or decreases.

The current version in Sitely is at https://sitely.mobilegeographics.com/stereoapollo/references.html , which keeps the same linebreaks regardless of page width.. It’s a rewrite of the page at https://mobilegeographics.com/stereoapollo/references.html (which wraps the way I want it to).The Source of Truth for that page is a Markdown document (which gets re-rendered for a couple of other uses, so it needs to stay Markdown),

I think I must be missing a Sitely idiom (I’m new to Sitely). I’ve tried Text boxes, and with or without Layout Boxes. What’s the right way to structure my page so it wraps? What pieces should I be using?

I’m also hitting the same problem on another site, a one-pager, but I can only put 2 links in this first post.

Hi @halmueller,

Sitely does not generate a fluid layout, it generates a fixed width layout with the ability to switch between multiple layouts. The switching is width-based, and the concept is exposed in the interface under the name “Device”. So conceptually each device has its own layout of the same content.

This radically simplifies layout and frames it like if it were print media, you don’t get unexpected layouts at some width you haven’t checked.

On the other hand it does mean manual adaptation of the content, and no way to make text be as wide as the page, or adapt to a variable width container.

Lacking this, the editor would necessarily need to exposed concepts such as constraints between different elements, minimum/maximum width, guides as part of the page structure, a relatively complex setup. We don’t currently have this in Sitely.

1 Like

Sitely doesn’t create “fluid” web pages. It’s more of a layout-driven application. Essentially, text is constrained to the design width of your placed text box. When you add plain tex to the box it will wrap to the width of the box and will be totally unaffected by browser width. This allows for predictable page layouts which remain intact regardless of the browser width. In order to accommodate different device widths, you create alternative device version which involves resizing elements, including text boxes, to suit each device size. As you decrease or increase the width and height of text boxes on each device variant, the text within the box will reflow accordingly.

1 Like

That helped, thanks folks! For the benefit of The Next Person, rereading Devices | Sitely Documentation explained to me what I had missed.