Responsive desing done

src/App.js

@@ -66,6 +66,24 @@ function App() {
             <BannerLogin 
               signIn={signIn}
             />
+
+            <ClockifyTasksDisplay
+              signIn={signIn}
+              timerOn={timerOn}
+
+              apiKey={apiKey}
+              setApiKey={setApiKey}
+
+              taskName={taskName}
+              setTaskName={setTaskName}
+
+              workspaceID={workspaceID}
+              setWorspaceID={setWorspaceID}
+
+              projectID={projectID}
+              setProjectID={setProjectID}
+            />
+
             <MainPomodoro 
               signIn={signIn}
               timerOn={timerOn}
@@ -84,22 +102,6 @@ function App() {
 
             />
 
-            <ClockifyTasksDisplay
-              signIn={signIn}
-              timerOn={timerOn}
-
-              apiKey={apiKey}
-              setApiKey={setApiKey}
-
-              taskName={taskName}
-              setTaskName={setTaskName}
-
-              workspaceID={workspaceID}
-              setWorspaceID={setWorspaceID}
-
-              projectID={projectID}
-              setProjectID={setProjectID}
-            />
             <GoDownArrow 
               direction={'about-this'}
             />

src/components/GoDownArrow.jsx

@@ -3,6 +3,19 @@ import { Link, animateScroll as scroll } from "react-scroll";
 
 const GoDownArrow = (props) => {
 
+        
+        const width = window.screen.width
+
+        console.log(width)
+
+        if (width <= '991.98') {
+            return (
+                <div className="go-down-separator-line">
+                    <hr/>
+                </div>
+            )
+        }
+
     console.log('GO DOWN ARROW DEPLOYED')
 
     return (