Implementing Responsive iShare

Owned by Kim Stimpson
Last updated: 23 Oct, 2014
1 min read

You need to include a reference to the CSS and JavaScript files in the head of the page. You then need to create an instance of the Responsive Design class so that it picks up and handles the page.

<head>
/* standard site CSS & JS go here */
 
/* responsive CSS goes here */
<link type="text/css" href="css/responsive/normalize.css" rel="stylesheet" />
<link type="text/css" href="css/responsive/responsive.css" rel="stylesheet" />
 
/* responsive JS goes here */
<script type="text/javascript" href="js/responsivedesign.js"></script>
<script type="text/javascript">
var responsiveDesign = new astun.ResponsiveDesign(300);
</script>
 
/* All other items go here */
 
/* responsive site override CSS goes here */
<link type="text/css" href="custom/responsive/responsiveoverrides.css" rel="stylesheet" />
</head>

The 300 that is passed into the class is the minimum column width which allows the design to intelligently decide when to add or remove columns.

Edit the CSS

As each site has different widths and breakpoint settings, these have to be hard-coded into the CSS. Listed below is the file name for the .css and the line number that requires attention.

/css/Responsive/Responsive.css

Line 155: The width for the breakpoint for the larger screen size.