changes to list page

aghontpi · Oct 20, 2021 · 26f7407 · 26f7407
1 parent 909999d
commit 26f7407
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git 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
@@ -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" />
       )}