Fixed some responsive issue

email2vimalraj · Sep 13, 2019 · ab20096 · ab20096
1 parent 9ad0474
commit ab20096
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 deletions.
diff --git a/src/App.js b/src/App.js
@@ -10,13 +10,19 @@ import Question from "./pages/question";
 import Feedback from "./pages/feedback";
 import Admin from "./pages/admin";
 
+import "./style.css";
+
 function App() {
   return (
     <>
       <Row justify="center" type="flex">
         <Col>
           <Link to="/">
-            <img src={HeaderImage} alt="Excellerate - Tata Communications" />
+            <img
+              className="logo"
+              src={HeaderImage}
+              alt="Excellerate - Tata Communications"
+            />
           </Link>
         </Col>
       </Row>
@@ -29,7 +35,7 @@ function App() {
       </Router>
 
       <Row>
-        <img src={FooterImage} alt="Footer Design" />
+        <img className="footerimage" src={FooterImage} alt="Footer Design" />
       </Row>
     </>
 

diff --git a/src/pages/home.js b/src/pages/home.js
@@ -4,8 +4,8 @@ import { Row, Col, Button } from "antd";
 import "../style.css";
 
 export default () => (
-  <Row type="flex" justify="center" style={{ margin: 80 }}>
-    <Row justify="space-between" type="flex" gutter={48}>
+  <Row type="flex" justify="center" style={{ marginTop: 80, marginBottom: 80 }}>
+    <Row justify="space-between" type="flex">
       <Col span={12}>
         <Button size="large" className="button" href="/question">
           Q & A Session

diff --git a/src/style.css b/src/style.css
@@ -14,3 +14,31 @@
   background-color: #fafafa;
   min-height: 200px;
 }
+
+.logo {
+  width: 250px;
+}
+
+.footerimage {
+  width: 300px;
+}
+
+@media (min-width: 576px) {
+  .logo {
+    width: 500px;
+  }
+
+  .footerimage {
+    width: 500px;
+  }
+}
+
+@media (min-width: 768px) {
+  .logo {
+    width: 870px;
+  }
+
+  .footerimage {
+    width: 870px;
+  }
+}