For a better experience, click the Compatibility Mode icon above to turn off Compatibility Mode, which is only for viewing older websites.

Responsive Design & Grid System

Sitecore utilizes templates to create websites with an integrated responsive web design: an approach that optimizes the display and functionality of web content across multiple platforms—from desktop computers to tablets to mobile devices. Content is presented in a way that is easiest for users to interact with based on the device that they are using. All websites developed within the Sitecore CMS are automatically responsive.

Viewing Widths and Style Sheets

Drexel's responsive design model is based on a 24-column grid system and four set viewing widths (computer, landscape, portrait, and mobile) that correspond to common viewing environments. Columns can span 1 to 24 grid units and are automatically given 10-pixel left and right margins. HTML elements, such as divs, may be assigned a specific column width and behavior by applying a grid-N class to it (where "N" represents the number of grid units). Adjacent elements spanning the entire content area should have grid classes that always add up to 24 (see Column Examples below).

Style Sheet / View Name Content Area Width* Main Menu Bar Width Display Range Column Widths**
Mobile 100% (≤ 739 pixels) 100% (≤ 739 pixels) ≤ 739 pixels 100%***
Portrait 700 pixels 720 pixels 740-1,019 pixels 30 x N - 20
Landscape 940 pixels 980 pixels 1,020-1,259 pixels 40 x N - 20
Computer 1,180 pixels 1,220 pixels ≥ 1,260 pixels 50 x N - 20

* The content area includes the left navigation bar, the main content area, and the RightRail. On this page, the content area is indicated by the gray box (no navigation bar or RightRail is displayed).
** The "N" in the equation represents the number of grid units making up a column.
*** In mobile view, all columns (regardless of grid number) expand to 100% of the viewing area.

Column Examples

grid-24

grid-12

grid-6

grid-6

grid-16

grid-8

grid-19

grid-5




Responsive Page Templates

Sitecore has several page templates that accommodate the responsive grid system, ranging from one to three columns. This page uses the "Content Home" template, which means it is one single column with no left navigation or RightRail. See Changing Page Templates for an example of each one.