From 06c4783a9cfb49c907ddfbca550f96ceb3095e0e Mon Sep 17 00:00:00 2001
From: maihunsandip <skole472@gmail.com>
Date: Sun, 3 Oct 2021 02:24:38 +0530
Subject: [PATCH] Made the website fully responsive.

---
 css/style.css | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html    |  4 ++--
 2 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/css/style.css b/css/style.css
index 796c873..f998738 100644
--- a/css/style.css
+++ b/css/style.css
@@ -11,6 +11,7 @@
 
 body{
   font-family: 'Noto Sans', sans-serif;
+  overflow-x: hidden;
 }
 .navigation{
   display: flex;
@@ -195,3 +196,55 @@ body{
   color: #E1306C;
 }
 
+/* ------- responsive ------------ */
+@media(max-width:767px){
+  .editor{
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    left: 50%;
+    transform: translate(-36%);
+    height: 110vh;
+  }
+  .editor > .tool{
+    height: 100%;
+    width: 70%;
+    order: 2;
+  }
+  .editor > .tool > .essential-tool{
+    top: 50%;
+    transform: translateY(-110%);
+    padding: 20px;
+    margin: 20px;
+  }
+  .editor > .tool > .essential-tool > .action-tool{
+    padding: 10px;
+  }
+  .editor > .tool > .essential-tool > .action-tool > .fas{
+    width: 50px;
+  }
+  .editor > .canvas{
+    order: 1;
+    height: 100%;
+    width: 70%;
+  }
+  .uploaded-img-container{
+    height: 200px;
+    width: 200px;
+  }
+  .editor > .canvas > .img-box{
+    height: 300px;
+    width: 400px;
+    top: 5%;
+    background-size: contain;
+  }
+  .navigation > .download-img > .save-now{
+    position: relative;
+    top: 66rem;
+    right: 152%;
+    padding: 10px;
+  }
+  .footer{
+    margin-top: 100px;
+  }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 892918c..d371909 100644
--- a/index.html
+++ b/index.html
@@ -93,7 +93,7 @@
 
     <section class="footer">
       <div class="logo">
-        <p>#quickphotoEdito</p>
+        <p>#quickphotoEditor</p>
       </div>
       <div class="useful-links">
         <ul>
@@ -102,7 +102,7 @@
           <li><a href="#"><i class="fab fa-instagram"></i></a></li>
         </ul>
       </div>
-    </section>
+    </section> 
     <script src="./js/app.js"></script>
   </body>
 </html>