diff --git a/public/assets/js/charts/barChartVertical.js b/public/assets/js/charts/barChartVertical.js
index 269d44a1..0533916f 100644
--- a/public/assets/js/charts/barChartVertical.js
+++ b/public/assets/js/charts/barChartVertical.js
@@ -5,53 +5,67 @@ export default function barChartVertical(targetNode, dataset) {
   const { data } = dataset;
   const [col_x, col_y] = dataset.columns;
   const svg = d3.select(targetNode).append('svg');
-  const svgWidth = targetNode.clientWidth;
-  const svgHeight = targetNode.clientHeight;
-
-  svg.attr('width', svgWidth).attr('height', svgHeight);
-
-  const margin = {
-    top: 20, right: 20, bottom: 70, left: 70,
-  };
-  const width = +svg.attr('width') - margin.left - margin.right;
-  const height = +svg.attr('height') - margin.top - margin.bottom;
-
-  const g = svg.append('g')
-    .attr('transform', `translate(${margin.left},${margin.top})`);
-
-  // X axis
-  const x = d3.scaleBand()
-    .range([0, width])
-    .domain(data.map((d) => d[col_x]))
-    .padding(0.2);
-  g.append('g')
-    .attr('class', 'charts__text charts__text--x-axis')
-    .attr('transform', `translate(0,${height})`)
-    .call(d3.axisBottom(x))
-    .selectAll('text')
-    .attr('transform', 'translate(-10,0)rotate(-45)')
-    .style('text-anchor', 'end');
-
-  // Add Y axis
-  const y = d3.scaleLinear()
-    .domain([0, d3.max(data, (d) => +d[col_y])])
-    .nice()
-    .range([height, 0]);
-  g.append('g')
-    .attr('class', 'charts__text charts__text--y-axis')
-    .call(d3.axisLeft(y));
-
-  // Bars
-  g.append('g')
-    .attr('class', 'charts__data')
-    .selectAll('bar')
-    .data(data)
-    .enter()
-    .append('rect')
-    .attr('x', (d) => x(d[col_x]))
-    .attr('y', (d) => y(d[col_y]))
-    .attr('width', x.bandwidth())
-    .attr('height', (d) => height - y(d[col_y]))
-    .attr('fill', '#69b3a2')
-    .attr('class', (d, i, n) => `charts__data--bar-vertical charts__data--${i}`);
+
+  function drawChart() {
+    svg.selectAll('.charts__data--bar-vertical').remove();
+    svg.selectAll('.charts__text').remove();
+
+    const svgWidth = targetNode.clientWidth;
+    const svgHeight = targetNode.clientHeight;
+
+    svg.attr('viewBox', `0 0 ${svgWidth} ${svgHeight}`).attr('preserveAspectRatio', 'xMidYMid meet');
+
+    const margin = {
+      top: 20,
+      right: 20,
+      bottom: 70,
+      left: 70,
+    };
+    const width = svgWidth - margin.left - margin.right;
+    const height = svgHeight - margin.top - margin.bottom;
+
+    // const width = +svg.attr('width') - margin.left - margin.right;
+    // const height = +svg.attr('height') - margin.top - margin.bottom;
+
+    const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
+
+    // X axis
+    const x = d3
+      .scaleBand()
+      .range([0, width])
+      .domain(data.map((d) => d[col_x]))
+      .padding(0.2);
+    g.append('g')
+      .attr('class', 'charts__text charts__text--x-axis')
+      .attr('transform', `translate(0,${height})`)
+      .call(d3.axisBottom(x))
+      .selectAll('text')
+      .attr('transform', 'translate(-10,0)rotate(-45)')
+      .style('text-anchor', 'end');
+
+    // Add Y axis
+    const y = d3
+      .scaleLinear()
+      .domain([0, d3.max(data, (d) => +d[col_y])])
+      .nice()
+      .range([height, 0]);
+    g.append('g').attr('class', 'charts__text charts__text--y-axis').call(d3.axisLeft(y));
+
+    // Bars
+    g.append('g')
+      .attr('class', 'charts__data')
+      .selectAll('bar')
+      .data(data)
+      .enter()
+      .append('rect')
+      .attr('x', (d) => x(d[col_x]))
+      .attr('y', (d) => y(d[col_y]))
+      .attr('width', x.bandwidth())
+      .attr('height', (d) => height - y(d[col_y]))
+      .attr('fill', '#69b3a2')
+      .attr('class', (d, i, n) => `charts__data--bar-vertical charts__data--${i}`);
+  }
+
+  window.addEventListener('resize', drawChart);
+  drawChart();
 }
diff --git a/src/charts/echarts/index.js b/src/charts/echarts/index.js
index 7a00e7f7..efd760a5 100644
--- a/src/charts/echarts/index.js
+++ b/src/charts/echarts/index.js
@@ -29,16 +29,18 @@ export const colorways = {
 export const mixedColourWay = () => {
   const themes = Object.keys(colorways).filter((key) => key !== 'rainbow');
 
-  return colorways.rainbow.reduce((colours, hex, index) => [hex].concat(
-    themes.reduce((_themed, theme) => {
-      if (colorways[theme].length > index) {
-        return _themed.concat(colorways[theme][index]);
-      }
+  return colorways.rainbow.reduce((colours, hex, index) =>
+    [hex].concat(
+      themes.reduce((_themed, theme) => {
+        if (colorways[theme].length > index) {
+          return _themed.concat(colorways[theme][index]);
+        }
 
-      return _themed;
-    }, colours),
-    [],
-  ));
+        return _themed;
+      }, colours),
+      []
+    )
+  );
 };
 
 // default echart options for DI charts
@@ -111,11 +113,11 @@ const defaultOptions = {
 
 export const handleResize = (chart, chartNode) => {
   window.addEventListener(
-    'onresize',
+    'resize',
     () => {
       chart.resize({ width: `${chartNode.clientWidth}px`, height: `${chartNode.clientHeight}px` });
     },
-    true,
+    true
   );
 };
 
@@ -123,7 +125,7 @@ export const getYAxisNamePositionFromSeries = (series) => {
   const isStack = series.some((item) => item.stack);
   const seriesCount = Array.from(new Set(series.map((d) => d.name))).length;
   const max = Math.max(
-    ...series.reduce((allData, { data }) => allData.concat(data.map((item) => item.value || 0)), []),
+    ...series.reduce((allData, { data }) => allData.concat(data.map((item) => item.value || 0)), [])
   );
   if (max === 0) {
     return 'blank';
diff --git a/src/components/ChartViews.js b/src/components/ChartViews.js
new file mode 100644
index 00000000..b06f4f29
--- /dev/null
+++ b/src/components/ChartViews.js
@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+import PreviewWidth from '../widgets/previewWidth';
+
+const ChartView = () => {
+  const width = new PreviewWidth();
+
+  const [view, setView] = useState('desktop');
+  const [checked, setChecked] = useState(false);
+
+  const chartPreview = document.getElementById('preview-iframe');
+  const allCharts = document.getElementById('all-charts');
+
+  useEffect(() => {
+    if (view === 'mobile') {
+      chartPreview.style.maxWidth = width.getWidth('mobile');
+    }
+    if (view === 'desktop') {
+      chartPreview.style.maxWidth = width.getWidth('desktop');
+    }
+    if (view === 'tablet') {
+      chartPreview.style.maxWidth = width.getWidth('tablet');
+    }
+
+    // force table layout recalculation
+    window.dispatchEvent(new Event('resize'));
+    if (checked) {
+      window.dispatchEvent(new Event('resize'));
+    }
+  }, [view, checked]);
+
+  const container = document.getElementById('page-container');
+  container.style.display = 'flex';
+
+  const previewPane = document.getElementById('preview-pane');
+  previewPane.style.display = checked ? 'block' : 'none';
+
+  const handleToggleChange = () => {
+    setChecked((preview) => !preview);
+    container.style.display = checked ? 'block' : 'flex';
+    previewPane.style.minWidth = checked ? '0%' : '30%';
+    allCharts.style.minWidth = checked ? '100%' : '70%';
+  };
+
+  return (
+    <div className="preview">
+      <div className="toggle-buttons">
+        {checked && (
+          <div className="buttons" id="buttons">
+            <button className="button" onClick={() => setView('desktop')}>
+              Desktop
+            </button>
+            <button className="button" onClick={() => setView('tablet')}>
+              Tablet
+            </button>
+            <button className="button" onClick={() => setView('mobile')}>
+              Mobile
+            </button>
+          </div>
+        )}
+        <div className="preview-label">
+          <h3> {checked ? 'Hide Preview' : 'Show Preview'}</h3>
+          <label className="preview-switch">
+            <input type="checkbox" checked={checked} value={checked} onChange={() => handleToggleChange()} />
+            <span className="switch"></span>
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChartView;
diff --git a/src/core/chartViews.js b/src/core/chartViews.js
new file mode 100644
index 00000000..9568f6a4
--- /dev/null
+++ b/src/core/chartViews.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import ChartView from '../components/ChartViews';
+
+const renderChartViews = () => {
+  const viewWrapper = document.getElementsByClassName('dicharts--chart-views')[0];
+  if (viewWrapper) {
+    const root = createRoot(viewWrapper);
+    root.render(<ChartView />);
+  }
+};
+
+export default renderChartViews;
diff --git a/src/index.html b/src/index.html
index f322071d..e8bd4549 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" id="viewport" />
     <meta http-equiv="x-ua-compatible" content="ie=edge" />
     <title>DI Chart Boilerplate</title>
     <meta name="description" content="" />
@@ -11,82 +11,110 @@
     <link rel="stylesheet" type="text/css" href="/assets/css/spotlights.min.css" />
     <link rel="stylesheet" type="text/css" href="/assets/icons/ico.data.svg.css" />
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" />
-    <link href="https://devinit.org/assets/css/di_website.min.2a5154f5c000.css" rel="stylesheet" />
+    <link href="https://devinit.org/assets/css/di_website.min.8b30ccf36a3d.css" rel="stylesheet" />
   </head>
   <body class="body">
     <div class="ui-base">
       <main id="pagecontent" class="pagecontent -nofocus" role="main" tabindex="-1">
-        <section class="section">
-          <div class="row row--narrow">
-            <h3 class="type-l type-l--trailer">D3 Chart</h3>
-            <div class="chart-container chart-container--full">
-              <div class="charts__chart">
-                <!-- CODE TO COPY STARTS HERE {% endcomment %} -->
-                <div class="dicharts--d3-boilerplate-chart"></div>
-                <!-- CODE TO COPY ENDS HERE {% endcomment %} -->
+        <section class="section" id="dicharts--chart-views">
+          <div class="dicharts--chart-views sticky"></div>
+        </section>
+        <div class="page-container" id="page-container">
+
+          <div class="all-charts" id="all-charts">
+            <section class="section">
+              <div class="row row--narrow">
+                <h3 class="type-l type-l--trailer">D3 Chart</h3>
+                <div class="chart-container chart-container--full">
+                  <div class="charts__chart">
+                    <!-- CODE TO COPY STARTS HERE {% endcomment %} -->
+                    <div class="dicharts--d3-boilerplate-chart"></div>
+                    <!-- CODE TO COPY ENDS HERE {% endcomment %} -->
 
-                <div class="chart-loading">
-                  <div class="chart-loading__block">
-                    <div></div>
-                    <div></div>
-                    <div></div>
-                    <div></div>
+                    <div class="chart-loading">
+                      <div class="chart-loading__block">
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-        </section>
+            </section>
 
-        <section class="section">
-          <div class="row row--narrow">
-            <h3 class="type-l type-l--trailer">E-Charts</h3>
-            <div class="chart-container chart-container--full">
-              <div class="charts__chart">
-                <!-- CODE TO COPY STARTS HERE {% endcomment %} -->
-                <div class="dicharts--echarts-boilerplate-chart"></div>
-                <!-- CODE TO COPY ENDS HERE {% endcomment %} -->
+            <section class="section">
+              <div class="row row--narrow">
+                <h3 class="type-l type-l--trailer">E-Charts</h3>
+                <div class="chart-container chart-container--full">
+                  <div class="charts__chart">
+                    <!-- CODE TO COPY STARTS HERE {% endcomment %} -->
+                    <div class="dicharts--echarts-boilerplate-chart"></div>
+                    <!-- CODE TO COPY ENDS HERE {% endcomment %} -->
 
-                <div class="chart-loading">
-                  <div class="chart-loading__block">
-                    <div></div>
-                    <div></div>
-                    <div></div>
-                    <div></div>
+                    <div class="chart-loading">
+                      <div class="chart-loading__block">
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-        </section>
+            </section>
 
-        <section class="section">
-          <div class="row row--narrow">
-            <h3 class="type-l type-l--trailer">Example Table</h3>
-            <div class="chart-container chart-container--full">
-              <div class="charts__chart">
-                <!-- CODE TO COPY STARTS HERE {% endcomment %} -->
-                <div class="dicharts--table-example"></div>
-                <!-- CODE TO COPY ENDS HERE {% endcomment %} -->
+            <section class="section">
+              <div class="row row--narrow">
+                <h3 class="type-l type-l--trailer">Example Table</h3>
+                <div class="chart-container chart-container--full">
+                  <div class="charts__chart">
+                    <!-- CODE TO COPY STARTS HERE {% endcomment %} -->
+                    <div class="dicharts--table-example"></div>
+                    <!-- CODE TO COPY ENDS HERE {% endcomment %} -->
 
-                <div class="chart-loading">
-                  <div class="chart-loading__block">
-                    <div></div>
-                    <div></div>
-                    <div></div>
-                    <div></div>
+                    <div class="chart-loading">
+                      <div class="chart-loading__block">
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
+            </section>
+          </div>
+          <!-- Add this to preview the charts at different screen sizes -->
+          <div class="preview-pane" id="preview-pane">
+            <div class="iframeWrapper">
+              <iframe src="http://localhost:3000/" allow="fullscreen" id="preview-iframe" title="Preview of charts on different screen sizes">
+              </iframe>
+            </div>
             </div>
           </div>
-        </section>
+        </div>
       </main>
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
     <script src="https://d3js.org/d3.v4.js"></script>
-    <script src="https://devinit.org/assets/js/app.bundle.15a22136aec7.js"></script>
-    <script src="https://devinit.org/assets/visualisation/js/dicharts.8dcf468d3b56.js"></script>
+    <script src="https://devinit.org/assets/js/app.bundle.0adecbc3ca7f.js"></script>
+    <script src="https://devinit.org/assets/visualisation/js/dicharts.92c38e09499f.js"></script>
+
+    <script>
+      const iframe = document.getElementById('preview-iframe');
+      iframe.onload = () => {
+        const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+
+        const section = iframeDocument.getElementById('dicharts--chart-views');
+        if (section) {
+          section.remove();
+        }
+      };
+    </script>
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
index 0b39b862..4ec1edd0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,11 +3,13 @@ import renderD3Chart from './charts/d3/exampleChart';
 import renderEChart from './core/ExampleChart';
 import renderTable from './core/ExampleTable';
 import './styles/styles.css';
+import renderChartViews from './core/chartViews';
 
 /**
  * Run your code after the page has loaded
  */
 window.addEventListener('load', () => {
+  renderChartViews();
   renderD3Chart();
   renderEChart();
   renderTable('dicharts--table-example');
diff --git a/src/styles/styles.css b/src/styles/styles.css
index cb72f725..8538af9a 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -1,6 +1,6 @@
-.dicharts--d3-boilerplate-chart, .dicharts--echarts-boilerplate-chart {
-    width: 100%;
-    height: 400px;
+.dicharts--d3-boilerplate-chart,
+.dicharts--echarts-boilerplate-chart {
+  width: 100%;
 }
 
 .spotlight-banner.data-selector--wrapper {
@@ -15,7 +15,11 @@
   display: inline-block;
 }
 
-.charts__chart .table-styled table {
+.charts__chart {
+  width: 100%;
+}
+
+.table-styled table {
   width: 100%;
 }
 
@@ -49,7 +53,7 @@
 
 @media screen and (max-width: 412px) {
   .custom-legend.right {
-      display: block;
+    display: block;
   }
 }
 
@@ -85,7 +89,7 @@
 
 @media screen and (max-width: 699px) {
   .chart-container .charts__chart {
-      display: block;
+    display: block;
   }
 }
 
@@ -118,3 +122,119 @@
 .invisible {
   visibility: hidden;
 }
+
+.page-container {
+  display: flex;
+}
+
+.preview-pane {
+  border-left: 1px solid #ccc;
+  overflow: auto;
+}
+
+.all-charts {
+  min-width: 100%;
+  height: 100vh;
+  overflow: auto;
+}
+
+#preview-iframe {
+  height: 100vh;
+  width: 100%;
+}
+
+#preview-button {
+  padding-left: 20px;
+  padding-right: 20px;
+  justify-content: center;
+  margin-left: 10px;
+  cursor: pointer;
+  border: none;
+  color: white;
+  font-size: 14px;
+  background-color: rgb(133, 39, 39);
+}
+
+#preview-button:hover {
+  color: white;
+  background-color: rgb(128, 99, 99);
+}
+
+.toggle-buttons {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: 20px;
+}
+
+.preview {
+  display: grid;
+  justify-content: end;
+  border-bottom: 1px solid lightgray;
+  background-color: #f2f2f2;
+  padding-bottom: 20px;
+  padding-top: 20px;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}
+
+.buttons {
+  margin-right: 20px;
+}
+
+.preview-label {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+}
+
+.preview-label h3 {
+  font-size: 20px;
+  color: black;
+}
+
+.preview-switch {
+  width: 48px;
+  height: 28px;
+  position: relative;
+}
+
+.preview-switch input {
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+
+.switch {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: lightgray;
+  border-radius: 30px;
+  transition: 0.5s;
+}
+
+.switch:before {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  left: 4px;
+  top: 4px;
+  content: '';
+  background-color: white;
+  border-radius: 30px;
+  transition: 0.5s;
+}
+
+input:checked + .switch {
+  background-color: rgb(133, 39, 39);
+}
+
+input:checked + .switch:before {
+  transform: translateX(20px);
+}
diff --git a/src/widgets/previewWidth.js b/src/widgets/previewWidth.js
new file mode 100644
index 00000000..75e7edf4
--- /dev/null
+++ b/src/widgets/previewWidth.js
@@ -0,0 +1,13 @@
+export default class PreviewWidth {
+  constructor() {
+    this.widths = {
+      mobile: '300px',
+      tablet: '820px',
+      desktop: '1400px',
+    };
+  }
+
+  getWidth(view) {
+    return this.widths[view];
+  }
+}