Merge pull request #118 from setlife-network/jpi/issues/116

Fix image distortion
setlife-network · Jul 23, 2020 · 95d85da · 95d85da
2 parents f8d68a7 + ecae780
commit 95d85da
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/src/assets/.DS_Store b/src/assets/.DS_Store
diff --git a/src/sections/Consultation.js b/src/sections/Consultation.js
@@ -29,11 +29,10 @@ const ButtonWrapper = styled(Col)`
 
 const ImageContainer = styled(Image)`
 
-    left: 50px;
     position: absolute;
     top: 0;
-    height: 100%;
-    width: 100%;
+    height: 150%;
+    width: 1100px;
     opacity: 0.8;
     transform: skew(15deg,0deg);
 `
@@ -44,8 +43,9 @@ const OutContainer = styled(Col)`
     margin-left: -10%;
     min-height: 100%;
     overflow: hidden;
-    transform: skew(-15deg,0deg);
+    transform: skew(-10deg,0deg);
     background: ${theme.colors.primary}
+
 `
 
 const ColDiv = styled(Col)`
@@ -111,7 +111,8 @@ class Consultation extends Component {
                     <Row>
                         <Col md={6} className='d-none d-md-flex'>
                             <OutContainer md={12}>
-                                <ImageContainer src={ConsultationPhoto} alt='Photo' />
+
+                                    <ImageContainer src={ConsultationPhoto} alt='Photo' />
                             </OutContainer>
                         </Col>
                         <ColDiv md={6}>

diff --git a/src/sections/Hero.js b/src/sections/Hero.js
@@ -76,7 +76,9 @@ class Hero extends Component {
                             md={{ order: 2 }}
                             xs={{ order: 1 }}
                         >
-                            <ImageContainer src={HeroGraphic} alt='Hero Graphic' />
+                            <div>
+                                <ImageContainer mx-auto src={HeroGraphic} alt='Hero Graphic' />
+                            </div>
                         </Col>
                     </Section>