fix image layout

suthesank · suthesank · commit cfa33d19d724 · 2020-11-20T11:30:54.000+08:00
diff --git a/src/pages/trade-types/margin/_policies.js b/src/pages/trade-types/margin/_policies.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { graphql, useStaticQuery } from 'gatsby'
 import { SmallContainer, Ul } from '../components/_style'
 import { SectionContainer, Show } from 'components/containers'
@@ -19,30 +19,22 @@ query {
 }
 `
 
-const ShowWrapper = styled.div`
-    width:100%;
+const container_style = css`
+    flex: 1;
+    width: 100%;
 `
 
-const ExampleImage = styled(QueryImage)`
-    margin:${(props) => (props.center ? '0 auto' : 'unset')};
-    width: 792px;
-    height: 453px;
-
-    @media ${device.laptop}{
-        width: 630px;
-        height: 361px;
-    }
-
-    @media ${device.tabletL}{
-        width:328px;
-        height:506px;
-    }
+const Desktop = styled(Show.Desktop)`
+    ${container_style}
+`
 
-    @media ${device.mobileM}{
-        width:289px;
-        height:454px;
-    }
+const Mobile = styled(Show.Mobile)`
+    ${container_style}
+`
+const ImageWrapper = styled.div`
+    width: 100%;
 `
+
 const StyledLinkButton = styled(LinkButton)`
     padding: 1.2rem 1.5rem;
     font-size: 14px;
@@ -167,14 +159,24 @@ const Policies = () => {
                             "Your trade will automatically close at 8,100, which is the nearest applicable market price to your stop loss level.",
                         )}
                     </Text>
-                    <Show.Desktop>
-                        <ExampleImage data={data['example']} />
-                    </Show.Desktop>
-                    <ShowWrapper>
-                        <Show.Mobile width="100%">
-                            <ExampleImage data={data['example_mobile']} />
-                        </Show.Mobile>
-                    </ShowWrapper>
+
+                    <Desktop max_width={'tabletS'}>
+                        <ImageWrapper>
+                            <QueryImage
+                                data={data['example']}
+                                alt="Trade types Stop/Loss"
+                            />
+                        </ImageWrapper>
+                    </Desktop>
+
+                    <Mobile min_width={'tabletS'}>
+                        <ImageWrapper>
+                            <QueryImage
+                                data={data['example_mobile']}
+                                alt="Trade types Stop/Loss"
+                            />
+                        </ImageWrapper>
+                    </Mobile>
 
                     <Text size="var(--text-size-m)" weight="bold" mb="0.8rem" mt="2.4rem">
                         {localize('Margin call')}
