Responsive classes

How your layout will adapt to the screen size

In responsive design, the layout breaks into another arrangement at certain break points. For example, the default layout described above has four grid columns evenly spaced within a 960 pixel box – navigation on the left, and then three possible grid columns to the right. When viewed with a device that has a screen width of only 320 pixels, the navigation column will be replaced by a 'menu' link, then each of the three proceeding columns will be aligned underneath each other in a single column. In this way, the webpage does not 'shrink' or 'zoom', and the content remains readable with a standard font size.

We have determined a number of break points based on common devices and compatibility with our existing grid.

One column at 320 pixels wide

  • Any resolution less than 320px has a single column of content.
  • Navigation is collapsed to a drop-down list
  • All content grid containers have equal width. (maximum of one narrow grid column)
ANU homepage at a width of 320 pixels

Two columns at 480 pixels wide

  • Navigation is collapsed to a drop-down list
  • All content grid containers flow over one or two columns – depending on functionality of the page. (maximum of two narrow grid columns)
ANU homepage at a width of 480 pixels

Three columns at 600 pixels wide

  • Navigation is collapsed to a drop-down list
  • All content grid containers flow over three columns – maintaining the current content space (maximum of three narrow grid columns).
ANU homepage at a width of 600 pixels

Four columns at 960+ pixels wide

  • All grid containers flow over four columns – maintaining the current content space (maximum of four narrow grid columns, includes full content in left-hand menu column).
ANU homepage at a width of 960 pixels

Troubleshooting responsive layouts

There are a number of styles created to address some of the issues that occur when certain layouts are forced into one and two column design spaces.

Showing or hiding divs

show-rsp1
Any <div> that has this class will only display when the screen width is between 320 and 480 pixels
ie 320 pixel breakpoint (1 column).
show-rsp2
Any <div> that has this class will only display when the screen width is between 480 and 600 pixels
ie 480 pixel breakpoint (2 column).
show-rsp3
Any <div> that has this class will only display when the screen width is between 600 and 960 pixels
ie 600 pixel breakpoint (3 column).
show-rsp4
Any <div> that has this class will only display when the screen width is 960 pixels or greater (4 column).

Tip: To show a <div> in multiple column modes, use multiple classes. For example, if you want the <div> to display in one and two column modes, use class="show-rsp1 show-rsp2".

show-rsp
Any <div> that has this class will only display when the screen width is less than 960 pixels.
hide-rsp
Any <div> that has this class will only display when the screen width is 960 pixels or greater.

Note: Don't use the show-rsp or hide-rsp classes on the same <div> as show-rsp1, show-rsp2, show-rsp3 or show-rsp4.

Stretching to full width

anu-col-right

Any <div> that has this class will display at 100 per cent width when the screen width is less than 600 pixels.

You would typically use this class if you were dividing your content into three narrow columns. In this layout the third column would wrap underneath the first two columns at the 480 pixel break point, leaving an empty space to the right of the third column – assigning anu-col-right to the last column would make that column 100 per cent width (overriding the narrow class). You could also assign anu-col-right to the first column, or to all three columns to make them all full width.

Right-aligning divs

anu-right-swap1
Any <div> that has this class will be right aligned when the screen width is 480 pixels or greater, but will 'swap' alignment to the left when the screen width is less than 480 pixels.
ie 320 pixel breakpoint (1 column).
anu-right-swap2
Any <div> that has this class will be right aligned when the screen width is 600 pixels or greater, but will 'swap' alignment to the left when the screen width is less than 600 pixels.
ie 480 pixel breakpoint (2 column).
anu-right-swap3
Any <div> that has this class will be right aligned when the screen width is 960 pixels or greater, but will 'swap' alignment to the left when the screen width is less than 960 pixels.
ie 600 pixel breakpoint (3 column).

Left-aligning divs

anu-left-swap1
Any <div>that has this class will be left aligned when the screen width is 480 pixels or greater, but will 'swap' alignment to the right when the screen width is less than 480 pixels.
ie 320 pixel breakpoint (1 column).
anu-left-swap2
Any <div>that has this class will be left aligned when the screen width is 600 pixels or greater, but will 'swap' alignment to the right when the screen width is less than 600 pixels.
ie 480 pixel breakpoint (2 columns).
anu-left-swap3
Any <div>that has this class will be left aligned when the screen width is 960 pixels or greater, but will 'swap' alignment to the right when the screen width is less than 960 pixels.
ie 600 pixel breakpoint (3 columns).

Updated:  18 August 2017/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle