CSS helpers

There is a number of CSS classes, that let one make small modifications in page layout. All of them were used in Modesto demo site and you might want to use them on your site too. CSS classes must be inserted into Additional Classes field in the module settings or section settings. It depends on how you want to apply the class - only for the particular page element or for the entire section.

Full CSS classes list and examples of their usage

1. banner-max-width - this class serves to make content section smaller, namely 570px wide. It can be used for headings and text. For example, if you use this class in Custom Heading module, it will make large titles and subtitles automatically stand in two or more rows without making extra line breaks. It also ensures nice display on mobile devices.
2. smaller-section - this class adds 115px padding on both sides of the section container, that makes it narrower than the normal section.
3. col-md-offset-2 col-md-8 - this class adds offset on the left of the content. They are usually used in 2-columns layout, when one needs to position the content in the middle of the column.
4. row-reverse - if you need to display sections in alternate direction, use this class. All you have to do is to build sections as you normally do. For example: image on left, text on right. After that apply row-reverse class in that section, where you want to apply alternate direction. The result will reflect on the frontend. This CSS trick will ensure proper display of the elements on mobile resolutions.
5. border-left col-md-offset-2 - this class lets you add grey border on the left of the element and add an offset on left. It is used mostly for text blocks and headings. You may apply only border-left class, if you don't need to make an offset.