Merge pull request #99 from kapilG0/bug-ssoc

After starting app margin needs to be done between header message and content #36

src/App.jsx

@@ -41,9 +41,9 @@ function App() {
     setAlert({
       msg: message
     })
-    setTimeout(() => {
-      setAlert(null);
-    }, 3500);
+     setTimeout(() => {
+       setAlert(null);
+     }, 3500);
   }
 
   return (

src/components/Alert/Alert.css

@@ -0,0 +1,8 @@
+.addMarginBottom{
+    margin-bottom: 5% ;
+}
+@media (min-width:321px) and (max-width:621px){
+    .addMarginBottom{
+        margin-bottom: 12% ;
+    }
+}

src/components/Alert/Alert.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
-
+import './Alert.css'
 const Alert = (props) => {
   return (
-    <div style={{ height: '50px' }} className='text-center align-center'>
+    <div style={{ height: '50px'}} className='text-center align-center addMarginBottom'>
       {props.alert && <div className={`alert alert-warning alert-dismissible fade show`} role="alert">
         {props.alert.msg}
       </div>}