diff --git a/client/package-lock.json b/client/package-lock.json
index 2e28bce6bc..ff0926d8ed 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -3840,6 +3840,11 @@
}
}
},
+ "css-mediaquery": {
+ "version": "0.1.2",
+ "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+ "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA="
+ },
"css-select": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
@@ -8846,6 +8851,11 @@
"resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz",
"integrity": "sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao="
},
+ "hyphenate-style-name": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
+ "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
+ },
"iconv-lite": {
"version": "0.4.19",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
@@ -11049,14 +11059,6 @@
"resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
"integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
},
- "json2mq": {
- "version": "0.2.0",
- "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
- "integrity": "sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=",
- "requires": {
- "string-convert": "^0.2.0"
- }
- },
"json3": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
@@ -11521,6 +11523,14 @@
"resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-1.1.2.tgz",
"integrity": "sha512-NcWuJFHDA8V3wkDgR/j4+gZx+YQwstPgfQDV8ndUeWWzta3dnDTBxpVzqS9lkmJAuV5YX35lmyojl6HO5JXAgw=="
},
+ "matchmediaquery": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.0.tgz",
+ "integrity": "sha512-u0dlv+VENJ+3YepvwSPBieuvnA6DWfaYa/ctwysAR13y4XLJNyt7bEVKzNj/Nvjo+50d88Pj+xL9xaSo6JmX/w==",
+ "requires": {
+ "css-mediaquery": "^0.1.2"
+ }
+ },
"math-random": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.1.tgz",
@@ -14382,32 +14392,6 @@
}
}
},
- "react-media": {
- "version": "1.9.2",
- "resolved": "https://registry.npmjs.org/react-media/-/react-media-1.9.2.tgz",
- "integrity": "sha512-JUYECMcJIm0V61LSVKd1e+II4ZTYO0GuR7xtlvKETlmThZ416BqZjZdJ1uGqgmMAGFeJ3TG4TX/3Kg4qbR3EJw==",
- "requires": {
- "@babel/runtime": "^7.2.0",
- "invariant": "^2.2.2",
- "json2mq": "^0.2.0",
- "prop-types": "^15.5.10"
- },
- "dependencies": {
- "@babel/runtime": {
- "version": "7.3.1",
- "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.1.tgz",
- "integrity": "sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==",
- "requires": {
- "regenerator-runtime": "^0.12.0"
- }
- },
- "regenerator-runtime": {
- "version": "0.12.1",
- "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
- "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
- }
- }
- },
"react-monaco-editor": {
"version": "0.18.0",
"resolved": "https://registry.npmjs.org/react-monaco-editor/-/react-monaco-editor-0.18.0.tgz",
@@ -14474,6 +14458,41 @@
"react-measure": "^2.0.2"
}
},
+ "react-responsive": {
+ "version": "6.1.1",
+ "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-6.1.1.tgz",
+ "integrity": "sha512-Po6pOEz70Agp+2lUmTxAnhfdkk0zp0IFgo/6bGcxv/S4Pa1sz0YG06WzkrIcASbyKSQ8x6AkcggeozXW3zj3kA==",
+ "requires": {
+ "hyphenate-style-name": "^1.0.0",
+ "matchmediaquery": "^0.3.0",
+ "prop-types": "^15.6.1"
+ },
+ "dependencies": {
+ "loose-envify": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+ "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+ "requires": {
+ "js-tokens": "^3.0.0 || ^4.0.0"
+ }
+ },
+ "prop-types": {
+ "version": "15.7.2",
+ "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+ "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+ "requires": {
+ "loose-envify": "^1.4.0",
+ "object-assign": "^4.1.1",
+ "react-is": "^16.8.1"
+ }
+ },
+ "react-is": {
+ "version": "16.8.4",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.4.tgz",
+ "integrity": "sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA=="
+ }
+ }
+ },
"react-side-effect": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.1.5.tgz",
@@ -16265,11 +16284,6 @@
"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
"integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
},
- "string-convert": {
- "version": "0.2.1",
- "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
- "integrity": "sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c="
- },
"string-length": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",
diff --git a/client/package.json b/client/package.json
index efb0c9e1cb..acff58bd63 100644
--- a/client/package.json
+++ b/client/package.json
@@ -46,10 +46,10 @@
"react-freecodecamp-search": "^2.0.2",
"react-ga": "^2.5.3",
"react-helmet": "^5.2.0",
- "react-media": "^1.9.2",
"react-monaco-editor": "^0.18.0",
"react-redux": "^5.0.7",
"react-reflex": "^3.0.8",
+ "react-responsive": "^6.1.1",
"react-spinkit": "^3.0.0",
"react-stripe-elements": "^2.0.1",
"react-youtube": "^7.8.0",
diff --git a/client/src/components/Header/components/NavLogo.js b/client/src/components/Header/components/NavLogo.js
index 21838dbee1..005fe3cf63 100644
--- a/client/src/components/Header/components/NavLogo.js
+++ b/client/src/components/Header/components/NavLogo.js
@@ -1,5 +1,5 @@
import React from 'react';
-import Media from 'react-media';
+import Media from 'react-responsive';
const fCClogo = 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg';
const fCCglyph = 'https://s3.amazonaws.com/freecodecamp/FFCFire.png';
diff --git a/client/src/components/Header/index.js b/client/src/components/Header/index.js
index d32233a78f..d1d07cc02c 100644
--- a/client/src/components/Header/index.js
+++ b/client/src/components/Header/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { createSelector } from 'reselect';
-import Media from 'react-media';
+import Media from 'react-responsive';
import FCCSearch from 'react-freecodecamp-search';
import NavLogo from './components/NavLogo';
diff --git a/client/src/templates/Challenges/classic/Show.js b/client/src/templates/Challenges/classic/Show.js
index acc6b4ac7f..a86dc283a0 100644
--- a/client/src/templates/Challenges/classic/Show.js
+++ b/client/src/templates/Challenges/classic/Show.js
@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
import Helmet from 'react-helmet';
import { graphql } from 'gatsby';
import { first } from 'lodash';
-import Media from 'react-media';
+import Media from 'react-responsive';
import LearnLayout from '../../../components/layouts/Learn';
import Editor from './Editor';
@@ -249,7 +249,7 @@ class ShowClassic extends Component {
-
+
{matches =>
matches ? (