From f9e35c5c8877ac6c72418a0c39647488de902613 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 1 Feb 2024 08:52:06 +0200
Subject: [PATCH] feat(deposit): responsive chain parity

---
 .../ValidatorOnboarding/Deposit/ChainParity.tsx   |  4 +++-
 .../Deposit/deposit.module.css                    | 15 +++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/ValidatorOnboarding/Deposit/deposit.module.css

diff --git a/src/pages/ValidatorOnboarding/Deposit/ChainParity.tsx b/src/pages/ValidatorOnboarding/Deposit/ChainParity.tsx
index fd2d6fef..4b813dcd 100644
--- a/src/pages/ValidatorOnboarding/Deposit/ChainParity.tsx
+++ b/src/pages/ValidatorOnboarding/Deposit/ChainParity.tsx
@@ -1,12 +1,14 @@
 import { Text } from '@status-im/components'
 
+import styles from './deposit.module.css'
+
 const ChainParity = () => {
   return (
     <>
       <Text size={15} weight="regular" color={'#647084'}>
         Awaiting chain parity
       </Text>
-      <div style={{ padding: '7.5% 20%' }}>
+      <div className={styles['chain-parity-img-container']}>
         <img
           src="/images/chain-parity.png"
           alt="Chain parity"
diff --git a/src/pages/ValidatorOnboarding/Deposit/deposit.module.css b/src/pages/ValidatorOnboarding/Deposit/deposit.module.css
new file mode 100644
index 00000000..dee71d74
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Deposit/deposit.module.css
@@ -0,0 +1,15 @@
+.chain-parity-img-container {
+  padding: 7.5% 20%;
+}
+
+@media (max-width: 880px) {
+  .chain-parity-img-container {
+    padding: 7.5% 10%;
+  }
+}
+
+@media (max-width: 570px) {
+  .chain-parity-img-container {
+    padding: 7.5% 5%;
+  }
+}
\ No newline at end of file