fix: mobile styling bugs

fullstackatbrown · Dec 26, 2024 · 561ee62 · 561ee62
1 parent 3d8d02d
commit 561ee62
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 18 deletions.
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
@@ -76,15 +76,15 @@ export default function Contact() {
 
   return (
     <Suspense fallback={<div></div>}>
-      <div className="min-h-screen flex flex-col bg-customBlack items-center text-gray-300 pb-3 pt-6 px-4 justify-center">
+      <div className="min-h-screen flex flex-col bg-customBlack items-center text-gray-300 pb-3 pt-6 px-[min(1rem,5%)] justify-center">
         {/* Header Section */}
         <h1 className="text-5xl font-semibold text-white mb-2">Get Involved</h1>
 
-        <div className="bg-neutral-1000 flex items-center justify-center p-5">
-          <div className="bg-neutral-900 rounded-3xl shadow-lg p-8 w-full max-w-6xl flex flex-col md:flex-row space-y-8 md:space-y-0 md:space-x-8">
+        <div className="bg-neutral-1000 w-[min(100%,840px)] flex items-center justify-center p-5 px-0">
+          <div className="bg-neutral-900 rounded-3xl shadow-lg p-[min(2rem,5%)] w-full max-w-6xl flex flex-col md:flex-row space-y-8 md:space-y-0 md:space-x-8">
 
             {/* Contact Information */}
-            <div className="bg-neutral-800 rounded-3xl p-10 text-gray-300 w-full md:w-1/2">
+            <div className="bg-neutral-800 rounded-3xl p-[min(2.5rem,8%)] text-gray-300 w-full md:w-1/2">
               <h2 className="text-white text-2xl font-semibold mb-4">Contact Information</h2>
               <p className="text-gray-400 mb-6">
                 Reach out to the Soul Sisters team at:
@@ -96,7 +96,7 @@ export default function Contact() {
                 </div>
                 <div className="flex items-center space-x-3 pt-8 pb-8">
                   <FaEnvelope className="text-white" />
-                  <a href="mailto:[email protected]"><span>[email protected]</span></a>
+                  <a href="mailto:[email protected]"><span className="break-all">[email protected]</span></a>
                 </div>
                 <div className="flex items-center space-x-3">
                   <FaMapMarkerAlt className="text-white" />
@@ -106,7 +106,7 @@ export default function Contact() {
             </div>
 
             {/* Contact Form */}
-            <form onSubmit={submitHandler} className="bg-neutral-800 rounded-3xl p-10 w-full md:w-1/2 space-y-6">
+            <form onSubmit={submitHandler} className="bg-neutral-800 rounded-3xl p-[min(2.5rem,8%)] w-full md:w-1/2 space-y-6">
               <div>
                 <label htmlFor="name" className="text-neutral-400">Your name</label>
                 <input id="name" type="text" name="subject" required onBlur={e => setSubject(e.target.value)} className="w-full bg-transparent text-white border-b border-gray-500 focus:outline-none focus:border-gray-300 p-2 mt-1" />
@@ -122,31 +122,31 @@ export default function Contact() {
                   onBlur={e => setBody(e.target.value)} id="message" className="w-full bg-transparent text-white border-b border-gray-500 focus:outline-none focus:border-gray-300 p-2 mt-1"></textarea>
               </div>
 
-              <div className="pb-20">
+              <div>
                 <label htmlFor="message" className="text-neutral-400">How Do You Want to Get Involved?</label>
                 <div>
                   <input id="film-prod" type="checkbox" checked={filmProd} onChange={e => setFilmProd(e.target.checked)} />
-                  <label htmlFor="film-prod">Film Production</label>
+                  <label htmlFor="film-prod" className="px-1">Film Production</label>
                 </div>
                 <div>
                   <input id="performing" type="checkbox" checked={performing} onChange={e => setPerforming(e.target.checked)} />
-                  <label htmlFor="performing">Performing</label>
+                  <label htmlFor="performing" className="px-1">Performing</label>
                 </div>
                 <div>
                   <input id="social-media" checked={socialMedia} type="checkbox" onChange={e => setSocialMedia(e.target.checked)} />
-                  <label htmlFor="social-media">Social Media</label>
+                  <label htmlFor="social-media" className="px-1">Social Media</label>
                 </div>
                 <div>
                   <input id="music" type="checkbox" checked={music} onChange={e => setMusic(e.target.checked)} />
-                  <label htmlFor="music">Music</label>
+                  <label htmlFor="music" className="px-1">Music</label>
                 </div>
                 <div>
                   <input id="support" type="checkbox" checked={support} onChange={e => setSupport(e.target.checked)} />
-                  <label htmlFor="support">Support</label>
+                  <label htmlFor="support" className="px-1">Support</label>
                 </div>
                 <div>
                   <input id="other" type="checkbox" checked={other} onChange={e => setOther(e.target.checked)} />
-                  <label htmlFor="other">Other</label>
+                  <label htmlFor="other" className="px-1">Other</label>
                 </div>
 
               </div>

diff --git a/components/Blog/Blog.module.css b/components/Blog/Blog.module.css
@@ -16,7 +16,7 @@
     display: flex;
     flex-direction: column;
     /* padding: 8.4vh 8.3vw; */
-    padding: 80px clamp(80px, 15%, 160px);
+    padding: min(15%, 80px) min(15%, 160px);
 }
 
 .blogHeader {
@@ -25,6 +25,15 @@
     align-items: flex-end;
     margin-bottom: 40px;
     gap: 24px;
+    /* smart word breaking */
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -ms-word-break: break-all;
+    word-break: break-word;
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
 }
 
 .blogTitle {

diff --git a/components/about/AboutSection.module.css b/components/about/AboutSection.module.css
@@ -3,8 +3,19 @@
     flex-direction: row;
 }
 
+.about {
+    padding: min(4.5rem,10%);
+}
+
+.image {
+    align-self: start;
+}
+
 @media (max-width: 1300px) {
     .container {
         flex-direction: column;
     }
+    .image {
+        align-self: auto;
+    }
 }
diff --git a/components/about/AboutSection.tsx b/components/about/AboutSection.tsx
@@ -25,8 +25,8 @@ export default async function AboutSection() {
                     <h2 className="text-5xl text-left mb-4 ml-4 py-16">
                         {title}
                     </h2>
-                    <section className={`rounded-3xl bg-neutral-800 p-12 shadow-md`}>
-                        <div className="flex flex-col w-full space-y-4 p-6" style={{ whiteSpace: 'pre-line' }}>
+                    <section className={`rounded-3xl bg-neutral-800 shadow-md ${styles.about}`}>
+                        <div className="flex flex-col w-full space-y-4" style={{ whiteSpace: 'pre-line' }}>
                             <p className="text-gray-200 leading-relaxed text-xl font-extralight">
                                 {description}
                             </p>
@@ -35,11 +35,11 @@ export default async function AboutSection() {
                 </div>
             </div>
             {/* Right Section: Image (Full Height) */}
-            <div className={`rounded-3xl h-screen justify-self-end`}>
+            <div className={`h-screen sticky top-0 justify-self-end ${styles.image}`}>
                 <Image
                     src={image_url}
                     alt="film-picture"
-                    className="object-cover w-full h-full rounded-lg shadow-lg"
+                    className="object-fill w-full h-full rounded-3xl shadow-lg"
                     width={metadata?.width || 1536}
                     height={metadata?.height || 2304}
                     loading="eager"