fix: Stepper layout (#73)

pancakeswap · Apr 15, 2021 · 6899561 · 6899561
1 parent 60fa704
commit 6899561
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/packages/pancake-uikit/src/components/Stepper/Step.tsx b/packages/pancake-uikit/src/components/Stepper/Step.tsx
@@ -57,14 +57,14 @@ export const StepNumber = styled.div<StatusProps>`
   border-radius: ${({ theme }) => theme.radii.circle};
   color: ${getStepNumberFontColor};
   display: flex;
+  justify-content: center;
   align-items: center;
   font-weight: 600;
   font-size: 32px;
   width: 48px;
   height: 48px;
   z-index: 1;
   ${({ theme }) => theme.mediaQueries.md} {
-    justify-content: center;
     font-size: 40px;
     width: 80px;
     height: 80px;
@@ -78,7 +78,7 @@ export const StepNumber = styled.div<StatusProps>`
 export const Step: React.FC<StepProps> = ({ index, status, numberOfSteps = 0, children }) => {
   const isIndexPair = index % 2 === 0;
   return (
-    <Flex justifyContent="center" mb={index < numberOfSteps - 1 ? "16px" : 0}>
+    <Flex justifyContent={{ md: "center" }} mb={index < numberOfSteps - 1 ? "16px" : 0}>
       <ChildrenLeftWrapper isVisible={!isIndexPair}>{children}</ChildrenLeftWrapper>
       <Wrapper>
         <StepNumber status={status}>{index + 1}</StepNumber>