diff --git a/app/assets/stylesheets/application/media_queries.scss b/app/assets/stylesheets/application/media_queries.scss
index 0182ecfba515b6c3562d23377e3309df17dc856c..1f661a1101076314bfbb40be053b99c497359001 100644
--- a/app/assets/stylesheets/application/media_queries.scss
+++ b/app/assets/stylesheets/application/media_queries.scss
@@ -1,25 +1,64 @@
-// This file was generated by html5-rails
-// https://github.com/sporkd/html5-rails
-// Upgrade with: $ rails generate html5:install
-//
-// EXAMPLE Media Query for Responsive Design.
-// This example overrides the primary ('mobile first') styles
-// Modify as content requires.
+/*Built using template from: https://gist.github.com/marcobarbosa/798569
+  Author: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
+*/
 
-@media only screen and (min-width: 35em) {
-  // Style adjustments for viewports that meet the condition
+/* Smartphones (portrait and landscape) ----------- */
+@media only screen
+and (min-device-width : 320px)
+and (max-device-width : 480px) {
+  /* Styles */
 }
 
-@media print,
-       (-o-min-device-pixel-ratio: 5/4),
-       (-webkit-min-device-pixel-ratio: 1.25),
-       (min-resolution: 120dpi) {
-  // Style adjustments for high resolution devices
+/* Smartphones (landscape) ----------- */
+@media only screen
+and (min-width : 321px) {
+  /* Styles */
 }
 
-// Print styles.
-// Inlined to avoid required HTTP connection: h5bp.com/r
+/* Smartphones (portrait) ----------- */
+@media only screen
+and (max-width : 320px) {
+  /* Styles */
+}
+
+/* iPads (portrait and landscape) ----------- */
+@media only screen
+and (min-device-width : 768px)
+and (max-device-width : 1024px) {
+  /* Styles */
+}
+
+/* iPads (landscape) ----------- */
+@media only screen
+and (min-device-width : 768px)
+and (max-device-width : 1024px)
+and (orientation : landscape) {
+  /* Styles */
+}
 
-@media print {
-  @include h5bp-media-print;
+/* iPads (portrait) ----------- */
+@media only screen
+and (min-device-width : 768px)
+and (max-device-width : 1024px)
+and (orientation : portrait) {
+  /* Styles */
 }
+
+/* Desktops and laptops ----------- */
+@media only screen
+and (min-width : 1224px) {
+  /* Styles */
+}
+
+/* Large screens ----------- */
+@media only screen
+and (min-width : 1824px) {
+  /* Styles */
+}
+
+/* iPhone 4 ----------- */
+@media
+only screen and (-webkit-min-device-pixel-ratio : 1.5),
+only screen and (min-device-pixel-ratio : 1.5) {
+  /* Styles */
+}
\ No newline at end of file
diff --git a/app/views/legal/index.html.erb b/app/views/legal/index.html.erb
index 3ce9b147ddb75f7cfe52741754031d0da48fde4b..5069fff6567c40575854d46dfa1b7930496e353d 100644
--- a/app/views/legal/index.html.erb
+++ b/app/views/legal/index.html.erb
@@ -14,6 +14,8 @@ jbuilder, bcrypt, bootsnap, listen, web-console, spring, spring-watcher-listen,
 <p>The following gems are used under Apache 2.0 licebse: selenium-webdriver, </p>
 <hr>
 <h3>CSS</h3>
-<p>A portion of css was generated by html5-rails along with font-awesome-rails</p>
+<p>A portion of css was generated by html5-rails along with font-awesome-rails. Media Queries template,
+  Author: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
+</p>
 <hr>
 <strong>This info was correct to the best of my knowledge as of 10:00 18/11/2020</strong>
\ No newline at end of file