Responsive

Author: Aishh2k

src/Components/CSS/Main.css

@@ -1,3 +1,10 @@
+#main-div{
+    height: 100%;
+    width: 100%;
+    position: relative;
+    z-index: 1;
+}
+
 #navbar  {
     text-align: center ;
     background-image: url("../Images/Navbg.png");
@@ -51,29 +58,31 @@ textarea:focus, input:focus, button:focus{
 }
 
 .leaflet-container {
-    height: 66.5vh;
+    height: 68vh;
     width: 100%;
 }
 
 .displaybox{
     font-family: 'Varela Round', sans-serif;
-    z-index: 1000;
-    background-color: white;
+    background-color: rgb(255, 255, 255);
     position: absolute;
-    top:165px;
-    min-height:150px;
+    z-index: 100;
+    margin-top: -75px;
     border-radius: 15px;
     box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
-    left: 0; 
-    right: 0; 
-    margin-left: auto; 
-    margin-right: auto; 
+    margin-left: 90px;
+    margin-right: 90px;
+    left:0;
+    right: 0;
     padding-top: 30px;
     padding-bottom: 0px;
 }
+.rowStyle{
+    border-radius: 15px;
 
+}
 .cols{
-    margin-left: 15px;
+    text-align: center;
 }
 
 .bods{
@@ -90,13 +99,19 @@ textarea:focus, input:focus, button:focus{
     font-weight: 900;
 }
 
+#maps{
+   z-index: 5;
 
+}
 
 @media only screen and (max-device-width: 500px) {
 
     .displaybox{
+        margin-top: -110px;
+        margin-left: 30px;
+        margin-right: 30px;
 
-        top:150px;
+        
 
     }
 
@@ -122,27 +137,51 @@ textarea:focus, input:focus, button:focus{
         color: white;
         padding-top: 20px;
         padding-bottom: 20px;
-        font-size: 28px;
+        font-size: 25px;
     }
 
     .leaflet-container {
         height: 90vh;
 
     }
 
-    .cols{
-        text-align: center;
-
+    .cols p{
+        font-size: 10px;
     }
 
+    .cols h4{
+        font-size: 18px;
+    }
+
+
+    ::placeholder { 
+        font-size: 13px;
+    }
+
 
+   
+}
+
+
+@media only screen and (max-device-width: 800px) and (min-device-width: 500px) {
+
+
+    
+    .displaybox{
+        margin-top: -80px;
+        margin-left: 50px;
+        margin-right: 50px;
+       
+    }
+
     .cols p{
-        font-size: 12px;
+        font-size: 15px;
     }
 
     .cols h4{
-        font-size: 23px;
+        font-size: 21px;
     }
 
-   
+
+    
 }

src/Components/JSX/Main.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import '../CSS/Main.css'
 import {MapContainer, TileLayer, Marker } from 'react-leaflet'
 import L from 'leaflet';
-import { Col, Row , Container } from 'react-bootstrap';
+import { Col, Row } from 'react-bootstrap';
 import {  ReactComponent as Arrow } from '../Images/icon-arrow.svg';
 
 const publicIp = require('public-ip');
@@ -81,7 +81,7 @@ class Main extends Component {
               lng:data.data.location.lng,
               ip: data.data.ip,
               isp:data.data.isp,
-              time:data.data.location.timezone,
+              time: "UTC" + " " + data.data.location.timezone,
               loc:data.data.location.city + ", " +data.data.location.region + ", " + data.data.location.country  ,
               position:[data.data.location.lat, data.data.location.lng]
 
@@ -101,9 +101,18 @@ class Main extends Component {
 
     render() {
         return (
-            <div>
-                <Container  className="displaybox " >
-                    <Row className="rowstyle" style={{paddingBottom:"20px"}}>
+            <div id="main-div" >
+                <div id="navbar">
+
+                    <h2>IP Address Tracker</h2>
+                    <form  type="submit" onSubmit={ this.handleSubmit }>
+                        <input type="text" placeholder="Search for any IP address or domain" value={this.state.ipaddress} onChange={this.handleChange} />
+                        <button>< Arrow/></button> 
+                    </form>
+                </div>
+
+                <div className="displaybox" >
+                    <Row className="rowstyle" style={{paddingBottom:"20px",}}>
                         <Col md  className="cols bods ">
                             <p>IP ADDRESS</p>
                             <h4>{this.state.ip}</h4>
@@ -116,28 +125,18 @@ class Main extends Component {
 
                         <Col md className="cols bods">
                             <p>TIMEZONE</p>
-                            <h4>UTC {this.state.time}</h4>
+                            <h4>{this.state.time}</h4>
                         </Col>
 
                         <Col md style={{marginRight:"10px"}} className="cols">
                             <p>ISP</p>
                             <h4>{this.state.isp}</h4>
                         </Col>
                     </Row>
-                </Container>
-
-
-                <div id="navbar">
-
-                    <h2>IP Address Tracker</h2>
-                    <form  type="submit" onSubmit={ this.handleSubmit }>
-                        <input type="text" placeholder="Search for any IP address or domain" value={this.state.ipaddress} onChange={this.handleChange} />
-                        <button>< Arrow/></button> 
-                    </form>
                 </div>
 
 
-                <MapContainer center={{ lat: 51.505, lng: -0.09 }} zoom={5} whenCreated={map => this.setState({ map })}>
+                <MapContainer id="maps" center={{ lat: 51.505, lng: -0.09 }} zoom={5} whenCreated={map => this.setState({ map })}>
                     <TileLayer
                     attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                     url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'