diff --git a/client/src/pages/learn.css b/client/src/pages/learn.css
index c393b71ee5..cc95bbf023 100644
--- a/client/src/pages/learn.css
+++ b/client/src/pages/learn.css
@@ -7,27 +7,12 @@
margin: 0 auto;
}
-@media screen, (max-width: 630px) {
+@media screen and (max-width: 630px) {
.learn-page-wrapper {
- padding: 0px 25px 0px 25px;
+ padding: 0 25px;
}
}
.learn-page-wrapper p {
margin-bottom: 0.75rem;
}
-
-#learn-app-wrapper {
- overflow-x:hidden;
-}
-
-@media screen, (max-width: 767px) {
- #learn-app-wrapper {
- right: -2em;
- padding: 2px 0 0 0;
- }
-}
-
-.reflex-layout.reflex-container.vertical {
- margin: 0 18px;
-}
diff --git a/client/src/templates/Challenges/classic/DesktopLayout.js b/client/src/templates/Challenges/classic/DesktopLayout.js
index 51f583e480..0c60156373 100644
--- a/client/src/templates/Challenges/classic/DesktopLayout.js
+++ b/client/src/templates/Challenges/classic/DesktopLayout.js
@@ -1,20 +1,20 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
import PropTypes from 'prop-types';
const propTypes = {
- resizeProps: PropTypes.shape({
- onStopResize: PropTypes.func,
- onResize: PropTypes.func
- }),
- instructions: PropTypes.element,
challengeFile: PropTypes.shape({
key: PropTypes.string
}),
editor: PropTypes.element,
- testOutput: PropTypes.element,
hasPreview: PropTypes.bool,
- preview: PropTypes.element
+ instructions: PropTypes.element,
+ preview: PropTypes.element,
+ resizeProps: PropTypes.shape({
+ onStopResize: PropTypes.func,
+ onResize: PropTypes.func
+ }),
+ testOutput: PropTypes.element
};
class DesktopLayout extends Component {
@@ -43,7 +43,7 @@ class DesktopLayout extends Component {
renderOnResize={true}
renderOnResizeRate={20}
{...resizeProps}
- >
+ >
{editor}
@@ -53,19 +53,17 @@ class DesktopLayout extends Component {
renderOnResize={true}
renderOnResizeRate={20}
{...resizeProps}
- >
+ >
{testOutput}
)}
+ {hasPreview && }
{hasPreview && (
-
-
-
- {preview}
-
-
+
+ {preview}
+
)}
);
diff --git a/client/src/templates/Challenges/classic/classic.css b/client/src/templates/Challenges/classic/classic.css
index 6d38590827..33a096045b 100644
--- a/client/src/templates/Challenges/classic/classic.css
+++ b/client/src/templates/Challenges/classic/classic.css
@@ -13,7 +13,7 @@
overflow-y: auto;
}
-@media screen, (max-width: 767px) {
+@media screen and (max-width: 767px) {
.instructions-panel {
height: calc(100vh - 112px);
}
diff --git a/client/src/templates/Challenges/components/preview.css b/client/src/templates/Challenges/components/preview.css
index 24498dc399..32d53a31fa 100644
--- a/client/src/templates/Challenges/components/preview.css
+++ b/client/src/templates/Challenges/components/preview.css
@@ -1,4 +1,5 @@
-.challenge-preview, .challenge-preview-frame {
+.challenge-preview,
+.challenge-preview-frame {
height: calc(100vh - 38px);
width: 100%;
padding: 0;
@@ -6,8 +7,9 @@
border: none;
}
-@media screen, (max-width: 767px) {
- .challenge-preview, .challenge-preview-frame {
+@media screen and (max-width: 767px) {
+ .challenge-preview,
+ .challenge-preview-frame {
height: calc(100vh - 112px);
}
}