diff --git a/src/components/extension-landing/extension-header.jsx b/src/components/extension-landing/extension-header.jsx
index df1957a2a..0a6509583 100644
--- a/src/components/extension-landing/extension-header.jsx
+++ b/src/components/extension-landing/extension-header.jsx
@@ -8,23 +8,21 @@ require('./extension-landing.scss');
const ExtensionHeader = props => (
-
- {props.children}
+
+ {props.renderCopy}
+
+ {props.renderImage}
+
-
-
-
+ {props.renderRequirements}
);
ExtensionHeader.propTypes = {
- children: PropTypes.node,
- imageAlt: PropTypes.string,
- imageSrc: PropTypes.string
+ renderCopy: PropTypes.node,
+ renderImage: PropTypes.node,
+ renderRequirements: PropTypes.node
};
module.exports = ExtensionHeader;
diff --git a/src/components/extension-landing/extension-landing.scss b/src/components/extension-landing/extension-landing.scss
index bb06fcda2..ae929a4c5 100644
--- a/src/components/extension-landing/extension-landing.scss
+++ b/src/components/extension-landing/extension-landing.scss
@@ -79,15 +79,20 @@
.inner {
justify-content: space-between;
flex-wrap: nowrap;
+ flex-direction: column;
+ align-items: flex-start;
}
.extension-info {
- max-width: $cols7;
- align-items: flex-start;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ margin-bottom: 5rem;
.extension-copy {
- margin-bottom: 5rem;
align-items: flex-start;
+ justify-content: start;
+ max-width: $cols7;
+ padding-right: 3.75em;
h1, h2 {
display: flex;
@@ -109,41 +114,39 @@
color: $ui-white;
}
}
-
- .extension-requirements-container {
- font-weight: 500;
- align-items: flex-start;
-
- .requirements-header {
- margin-bottom: 1.5rem;
- }
-
- .extension-requirements {
- justify-content: space-between;
- }
-
- .extension-requirements span {
- display: flex;
- margin-right: 1rem;
- font-size: 15px; // TODO: change to rem later
- align-items: center;
- }
-
- .extension-requirements span img {
- padding-right: .5rem;
- }
- }
}
.extension-image {
- width: 100%;
- max-width: $cols5;
+ margin-top: auto;
img {
- max-width: 100%;
- max-height: 100%;
+ max-width: $cols5;
+ max-height: $cols3;
+ }
+ }
+
+ .extension-requirements-container {
+ font-weight: 500;
+ align-items: flex-start;
+
+ .requirements-header {
+ margin-bottom: 1.5rem;
}
+ .extension-requirements {
+ justify-content: space-between;
+ }
+
+ .extension-requirements span {
+ display: flex;
+ margin-right: 1rem;
+ font-size: 15px; // TODO: change to rem later
+ align-items: center;
+ }
+
+ .extension-requirements span img {
+ padding-right: .5rem;
+ }
}
}
diff --git a/src/views/ev3/ev3.jsx b/src/views/ev3/ev3.jsx
index 9d2fb77a0..50f29fa1e 100644
--- a/src/views/ev3/ev3.jsx
+++ b/src/views/ev3/ev3.jsx
@@ -32,57 +32,62 @@ class EV3 extends ExtensionLanding {
return (