Merge pull request #246 from mcctrix/master

Fixed UI on Mobile

Author: jsvigneshkanna

components/faqs.js

@@ -16,7 +16,7 @@ const FAQs = () => {
         },
         q3: {
           qus: "What all components are there in this website",
-          ans: 'There are a lot of components on this website, you can access them from <a href="/components" target="_blank" rel="noreferrer" class="text-blue-700">Here</a>',
+          ans: 'There are lots of components such as Button, Form, Feature Card etc. which can save lot of time for a front end dev. you can access them from <a href="/components" target="_blank" rel="noreferrer" class="text-blue-700">Here</a>',
         },
         q4: {
           qus: "Can we play around with tailwindcss codes",

components/navbar.js

@@ -15,7 +15,7 @@ const Navbar = () => {
   };
   const displayMenu = () => {
     if (isMenuOpen) {
-      return "flex sm:hidden flex-col justify-center items-center ";
+      return "flex sm:hidden flex-col justify-center items-center gap-2 my-2";
     } else {
       return "hidden";
     }

pages/components/badges.js

@@ -16,7 +16,7 @@ const Badge = () => {
       <Navbar />
       <div className="codepen_page font-poppins">
         <p className="codepen_brief bg-sky-200 text-blue-700 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
-          How cool is to have coloured and meaningfull badges near your image/
+          How cool is to have coloured and meaningful badges near your image/
           cards/ testimonials. Sounds interesting, then why waiting to check
           inside 😎
         </p>

styles/components/navbar_style.css

@@ -54,10 +54,10 @@ nav {
 @media (max-width: 900px) {
   .nav_links {
     padding: 12px;
-    margin-bottom: 24px;
+    /* margin-bottom: 24px; */
   }
   .nav_links:nth-child(1) {
-    margin-top: 5vh;
+    /* margin-top: 5vh; */
   }
   .nav_container {
     width: 96%;