WiscWeb - Narrowed Width Classes for Content Layouts

The narrowed width classes allow you to constrict the amount of space used for your content layout. It will create empty whitespace to the left and right of the content.

Overview

There are two CSS classes available within the UW Theme for narrowing content width. These can be applied within the class field of the content layout settings. 

Narrowed widths can improve readability of text (including reading speed and comprehension) and are also a benefit to users with dyslexia.

Setting a narrowed width

The narrowed width classes can be added to the settings of a content layout: 

  1. Open a page and add a content layout
  2. Click on the gear icon in the top right corner of the content layout

    Settings icon highlighted in a green box

  3. Locate the Row Class field

    Various fields for content layouts with the row class field highlighted in a green box

  4. Enter your row class based on how much you wish to constrict the content
    1. uw-row-1000 will narrow the content within the content layout to 1,000 pixels.
    2. uw-row-800 will narrow the content within the content layout to 800 pixels.

      Row class field with "uw-row-1000" typed into the field
      Row class field with "uw-row-800" typed into the field

  5. Save the page as draft or publish/update and then preview your changes

Before/after examples

Before

Screenshot of a paragraph of text which shows a full width version of the paragraph.

After - 1000 width

Screenshot of a paragraph of text which shows a 1000 width version of the paragraph.

After - 800 width

Screenshot of a paragraph of text which shows a 800 width version of the paragraph.




Keywords:narrow, narrowed, width, paragraph, one column layout, class, row   Doc ID:128637
Owner:Jenna K.Group:WiscWeb CMS
Created:2023-05-30 11:46 CDTUpdated:2023-05-30 12:00 CDT
Sites:DoIT Help Desk, WiscWeb CMS
Feedback:  0   0