Adjusting Full-Width Text Blocks on Desktop
Our webpages are set up on a 12-column grid. Having more than two or three lines of text that take up a full row makes it difficult for users to follow the copy as they read it.
This is simply too wide an area to have a reader's eyes follow and keep up with the copy on their screen. Don't worry though, as there are quite a few options to change and fix this issue.
Option 1: Add an Image To the Left or Right of the Text
The quickest and easiest fix for this problem is to add another column to the row with the text, and add an image in the new column. This will add some color and interest in your page and keep the text in a smaller column, making it much easier to read. You can make the two columns 1/2 and 1/2, or 1/3 and 2/3, or whatever works and looks best.
Option 2: Break the Text Up into Two Columns
If you don't have an image that you can use, and if the text has a natural breaking point in or near the middle, you can break the text up into two even columns. Add another column to the row with the text in it, make sure they're both 1/2 the width of the row, and in the row settings, make sure that the Columns Gap is set to 30px, Full Height Row is selected, Columns Position is set to Top, and Equal Height is selected.
You can also add a 2px dotted line separator between the two columns using the "Design Options" of the second column's edit feature. Just make sure that you add another 30px of padding on the column on the same side as the dotted separator, and give that column the class of "right-col-contact" and give the row the ID of "dotted-col-contact".
Option 3: Give the Full-Width Row Indentations on Large Screens
If you don't have an image that you can use, or you can't break the text up into two columns, you can keep it all in one column, but indent the text on the left and right on larger screens. These indentations will not affect smaller screens when viewed on a mobile device.
In order to set this up, you need to go into the edit features of the single column that the wall of text is in. Click on the "Responsive Options" tab. On the second device down, change its "Offset" to be "1 column - 1/12," and its "Width" to be "10 columns - 5/6." Save the changes. The wall of text will be indented 1/12 of the row on the left and the right now, but only on larger screens. It'll still be full-width on mobile devices.
And presto! Much easier on the eyes to read.
If you are using a left-aligned header and want to keep the text left-aligned, just set the column width not the offset.