Updated the css

Author: aman1106

src/components/clock/AnalogClock/index.js

@@ -60,8 +60,8 @@ class AnalogClock extends Component {
   renderClock = () => {
     return (
       <div className="react-clock__face">
-        <h6 style={{top: 30, position: 'absolute', left: 150, color: "#2a2a2a"}}>Made By:</h6>
-        <h6 style={{top: 220, position: 'absolute', left: 165, color: "#2a2a2a"}}>AMAN</h6>
+        <h6 className="text-top">Made By:</h6>
+        <h6 className="text-bottom" >AMAN</h6>
         {this.renderMinuteMarks()}
         {this.renderHourMarks()}
       </div>
@@ -123,7 +123,7 @@ class AnalogClock extends Component {
 
   render() {
     return (
-      <div style={{left: "40%", height: 400, width: 400, position: 'absolute'}}>
+      <div className="clock__analog">
         {this.renderClock()}
         {this.renderHourHand()}
         {this.renderMinuteHand()}

src/styles/App.less

@@ -24,3 +24,46 @@
 	padding: .6em 1.4em .5em .8em;
   border-radius: 4px;
 }
+
+.clock__analog {
+  left: 40%;
+  height: 400px;
+  width: 400px;
+  position: absolute;
+}
+
+.text-top {
+  top: 30px;
+  position: absolute;
+  left: 150px;
+  color: #2a2a2a;
+}
+
+.text-bottom {
+  top: 220px;
+  position: absolute;
+  left: 165px;
+  color: #2a2a2a;
+}
+
+@media only screen and (max-width: 576px) {
+  .clock__analog {
+    left: 25%;
+    height: 200px;
+    width: 200px;
+  }
+
+  .text-top {
+    top: 15px;
+    position: absolute;
+    left: 70px;
+    color: #2a2a2a;
+  }
+
+  .text-bottom {
+    top: 105px;
+    position: absolute;
+    left: 75px;
+    color: #2a2a2a;
+  }
+}