Fix misalignments and enhance responsiveness (#262)

* Fix misalignments and enhance responsiveness * fix the height positioning of the banner in all devices * fix linter errors * add designed by Flagrant text in the footer section
wnbrb · Jan 7, 2025 · 3604148 · 3604148
1 parent 04f0354
commit 3604148
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 34 deletions.
diff --git a/app/javascript/components/Thankyou.jsx b/app/javascript/components/Thankyou.jsx
@@ -5,7 +5,7 @@ import mike from '../../assets/images/mike.png';
 const Thankyou = () => {
     return (
         <div className="thankyou">
-            <h2>Thank you to our Sponsors</h2>
+            <h2>Thank you to our Sponsor</h2>
             <p>
                 We are immensely grateful to our sponsor for his generous support and commitment.
                 His invaluable contribution has been instrumental in helping us achieve our goals

diff --git a/app/javascript/components/layout/Footer.jsx b/app/javascript/components/layout/Footer.jsx
@@ -107,6 +107,15 @@ const Footer = () => (
                             <i className="bi bi-linkedin"></i>
                         </a>
                     </div>
+                    <p>
+                        <span>Designed by </span>
+                        <a
+                            href="https://www.beflagrant.com/"
+                            style={{ textDecoration: 'underline' }}
+                        >
+                            Flagrant
+                        </a>
+                    </p>
                     <p className="made-with-love">
                         Made with{' '}
                         <span role="img" aria-label="heart">

diff --git a/app/javascript/components/pages/Home.jsx b/app/javascript/components/pages/Home.jsx
@@ -61,7 +61,9 @@ const Home = () => {
             <SharedLayout>
                 <section className="hero-container mt-2rem">
                     <div className="work-in-progress">
-                        <h1 className="font-besley text-lg">🚧 Website Redesign in Progress 🚧</h1>
+                        <h1 className="font-besley text-base md:text-lg lg:text-lg">
+                            🚧 Website Redesign in Progress 🚧
+                        </h1>
                         <p className="font-besley text-base">
                             You might spot old branding, broken links, or other inconsistencies.
                             We&apos;re on it!

diff --git a/app/javascript/stylesheets/footer.scss b/app/javascript/stylesheets/footer.scss
@@ -3,7 +3,10 @@ footer {
     width: 100%;
 
     .footer {
-        @apply  container mx-auto max-w-6xl flex justify-between text-sm px-12 xl:px-0 py-8 md:py-20 flex-col md:flex-col border-t border-gray-100 md:border-t-0;
+        @apply  container mx-auto max-w-6xl flex justify-between text-sm px-12 xl:px-0 py-8 md:py-20 flex-col md:flex-col border-t border-gray-100 md:border-t-0 xs:px-[1rem];
+        @media (min-width: 416px) and (max-width: 640px){
+            padding-left: 1rem;
+        }
         color:#2e0880;
 
                 .first-div{
@@ -57,6 +60,7 @@ footer {
         .button{
             padding-top: 0.2rem;
             padding-bottom: 0.2rem;
+            @apply xs:text-[13px];
         }
 
         .footer-right {

diff --git a/app/javascript/stylesheets/hire.scss b/app/javascript/stylesheets/hire.scss
@@ -11,18 +11,26 @@
     padding: 2rem;
     width: 80%;
     margin: auto;
-    @apply text-wnbrb-blue-navy text-base font-rubik
+
+    @apply text-wnbrb-blue-navy text-base font-rubik xs:w-[100%];
+   @media (min-width: 416px) and (max-width: 640px){
+        width: 100%;
+    }
 }
 .hire h2{
-    @apply text-wnbrb-blue-navy text-4xl font-besley font-bold
+    @apply text-wnbrb-blue-navy text-4xl font-besley font-bold xs:text-2xl;
+    @media (min-width: 416px) and (max-width: 640px){
+        font-size: 1.8rem;
+    }
 }
 .grow{
     text-align: center;
  }
  .hire-img{
     border-radius: 30px;
-    height: 320px;
+    height: auto;
     max-width: 100%;
     margin-top: 2rem;
-    object-fit: cover;
+    object-fit: contain;
+    @apply   lg:h-[320px] ;
  }
diff --git a/app/javascript/stylesheets/home.scss b/app/javascript/stylesheets/home.scss
@@ -12,14 +12,10 @@
     padding: 0.5rem 1rem;
     flex-direction: column;
     font-weight: bold;
-    height: 10rem;
+    height: 8rem;
     color: #2e0880;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     position: fixed;
-
-    @media (min-width: 768px) {
-      height: 5rem;
-    }
 }
 .hero {
     @apply flex
@@ -60,19 +56,29 @@
 }
 .info {
     background-color: #c6e6da;
-    padding-top: 18px;
-    @media (min-width: 768px) { 
+    @media (min-width: 1025px) {
+        padding-top: 9px;
+    }
+    @media (min-width: 769px) and (max-width: 1024px){ 
 
-        padding-top: 13px;
+        padding-top: 18px;
     }
-    @media (min-width: 1024px) { 
+    @media (min-width: 641px) and (max-width: 768px) { 
 
-        padding-top: 5px;
+        padding-top: 19px;
+    }
+    @media (min-width: 416px) and (max-width: 640px) { 
+
+        padding-top: 25px;
+    }
+    @media (max-width: 416px) {
+        padding-top: 30px;
     }
 }
 .info-layout {
     padding-top: 5rem;
-    padding-bottom: 5rem;
+    padding-bottom: 3rem;
+    @apply sm:pb-[3rem] md:pb-[0rem]  lg:pb-[5rem];
 }
 .info-card-section {
     @apply mx-auto
@@ -99,9 +105,8 @@
 }
 .info-card-image{
     border-radius: 20px;
-    height: 310px;
-    object-fit: cover;
-    max-width: 100%;
+    object-fit: contain;
+
 
     @media (min-width: 768px) { 
 
@@ -111,6 +116,7 @@
     }
     @media (min-width: 1024px) { 
            height: 270px;
+           object-fit: cover;
            border-radius: 0;
             border-top-right-radius: 20px;
             border-bottom-right-radius: 20px;        
@@ -130,11 +136,12 @@
     color: white;
 }
 .bg-color-2 {
-    background-color: #b33c3c;
-    color: white;
+    background-color:  #ffdd19;
+
 }
 .bg-color-3 {
-    background-color: #ffdd19;
+    background-color: #b33c3c;
+    color: white;
 }
 .line {
     margin-top: -2.5rem;
@@ -148,7 +155,7 @@
     grid-template-rows: auto;
     padding-top: 4rem;
     gap: 2rem;
-
+    @apply xs:pt-[3rem];
 
     @media (min-width: 768px) { 
         grid-template-columns: 1fr 1fr; 
@@ -263,14 +270,23 @@
 }
 .meetspeak{
     background-color: #bfe444;
-    margin-top: -20px;
-
-    @media (min-width: 768px) { 
-        margin-top: -26px;
-
+    @media (min-width: 1025px) {
+        margin-top: -33px;
     }
+   @media (min-width:768px) and (max-width: 1024px){ 
+       margin-top: -27px;
+   }
+
+    @media (min-width: 641px) and (max-width: 768px){ 
+        margin-top: -23px;
 
-    @media (min-width: 1024px) { 
-        margin-top: -32px;
     }
+    @media (min-width: 416px) and (max-width: 640px) { 
+
+        margin-top: -16px;
+    }
+    @media (max-width: 416px) {
+        margin-top: -12px;
+    }
+
 }
diff --git a/app/javascript/stylesheets/meetup.scss b/app/javascript/stylesheets/meetup.scss
@@ -37,6 +37,7 @@
   flex-direction: column;
   gap: 2rem;
   padding: 6rem 0;
+  @apply xs:py-[4rem];
 
   @media (min-width: 768px) { 
     gap: 2rem;
@@ -52,12 +53,13 @@
   background-color: #ffffe5;
   display: flex;
   flex-direction: column;
-  width: 70%;
+  width: 80%;
   align-items: center;
   padding: 2rem;
   margin: auto;
   padding-top: 0;
   border-radius: 2rem;
+  @apply xs:w-[85%];
 
 @media (min-width: 1024px) { 
    width: 35%;

diff --git a/app/javascript/stylesheets/thankyou.scss b/app/javascript/stylesheets/thankyou.scss
@@ -7,6 +7,7 @@
     padding: 2rem;
     gap: 2rem;
     text-align: center;
+    @apply xs:text-left xs:px-[1.3rem];
 }
 .thankyou h2{
     @apply text-4xl text-black font-besley font-bold

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,7 +5,8 @@ module.exports = {
     presets: [],
     theme: {
         screens: {
-            sm: '640px',
+            xs: { max: '415px' },
+            sm: '640px', 
             md: '768px',
             lg: '1024px',
             xl: '1280px',
@@ -343,6 +344,7 @@ module.exports = {
             ],
         },
         fontSize: {
+            '13px': '13px',
             xs: ['0.75rem', { lineHeight: '1rem' }],
             sm: ['0.875rem', { lineHeight: '1.25rem' }],
             base: ['1rem', { lineHeight: '1.5rem' }],