From 26f7407b52033da918a54291b722ca099565a2cb Mon Sep 17 00:00:00 2001
From: Gopinath v <gopinath@infinitisoftware.net>
Date: Wed, 20 Oct 2021 11:14:24 +0530
Subject: [PATCH] changes to list page

---
 src/Pages/List/List.tsx    | 10 ++++------
 src/Pages/List/Preview.tsx |  3 ++-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/Pages/List/List.tsx b/src/Pages/List/List.tsx
index 16745c2..e59ac69 100644
--- a/src/Pages/List/List.tsx
+++ b/src/Pages/List/List.tsx
@@ -21,7 +21,7 @@ const List = () => {
           </Col>
           <Col span={24}>
             <Row align="middle" justify="center">
-              <Col>
+              <Col style={{ textAlign: 'center' }}>
                 <span className="subtitle">
                   Drag and Drop Editor tailored for <b>Mails</b>
                 </span>
@@ -52,20 +52,18 @@ const List = () => {
             <span className="title">Choose a template and get started.</span>
           </Col>
           <Col span={16}>
-            <span className="subtitle">
-              All templates are redesigned in dnde, by keeping the original mail as reference.
-            </span>
+            <span className="subtitle">All templates are redesigned in dnde, using original mail as reference.</span>
           </Col>
         </Row>
 
-        <Row justify="center" className="template-list" gutter={[0, 56]}>
+        <Row justify="center" className="template-list" gutter={[0, 40]}>
           <Col lg={6}>
             <NewItem />
           </Col>
           {isLoading &&
             [1, 2].map((item, key) => {
               return (
-                <Col lg={6}>
+                <Col xs={24} md={12} lg={6} style={{ textAlign: 'center' }}>
                   <Preview
                     key={key}
                     id={'8x93dummy'}
diff --git a/src/Pages/List/Preview.tsx b/src/Pages/List/Preview.tsx
index f40fe2a..5b12660 100644
--- a/src/Pages/List/Preview.tsx
+++ b/src/Pages/List/Preview.tsx
@@ -25,6 +25,7 @@ const PreviewContainer = styled.div`
   transition: all 0.2s ease 0s;
   position: relative;
   text-align: center;
+  margin: 0 auto;
 
   .hoverItem {
     display: none;
@@ -105,7 +106,7 @@ const Preview = ({ image, id, skeleton }: PreviewProps) => {
   return (
     <PreviewContainer>
       {skeleton ? (
-        <div style={{ height: '350px', maxWidth: '280px', padding: '24px 24px' }}>{skeleton}</div>
+        <div style={{ height: '350px', minWidth: '280px', maxWidth: '280px', padding: '24px 24px' }}>{skeleton}</div>
       ) : (
         <img height="350px" src={image} alt="preview" />
       )}