Merge pull request #3 from berat/develop

fix: some responsive problems
berat · Feb 29, 2024 · af00387 · af00387
2 parents 3687274 + 2c4bb0e
commit af00387
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -2,7 +2,7 @@ import { About, Hero, Header, Price, Faq, HowWorks, Footer } from "@/components"
 
 export default function Home() {
   return (
-    <main className="lg:mt-20 lg:mx-20 lg:p-12 bg-white mt-4 mx-4 p-8 mb-24 rounded">
+    <main className="lg:mt-20 lg:mx-20 lg:p-12 bg-white mt-4 mx-4 p-8 mb-4 lg:mb-24 rounded">
       <Header />
       <Hero />
       <About />

diff --git a/components/Atoms/Title.tsx b/components/Atoms/Title.tsx
@@ -8,7 +8,7 @@ const Title: React.FC<TitleProps> = ({ label }) => {
   return (
     <div className="relative center w-fit mx-auto mb-16">
       <span className="absolute mw-[150%] h-[5px] bg-primary rounded top-3 -left-1 -right-1 z-10" />
-      <h2 className="text-xl xl:text-2xl font-semibold uppercase relative z-20">{label}</h2>
+      <h2 className="text-[1.1rem] xl:text-2xl font-semibold uppercase relative z-20">{label}</h2>
     </div>
   );
 };

diff --git a/components/Hero.tsx b/components/Hero.tsx
@@ -27,7 +27,7 @@ const Hero = () => {
   return (
     <section className="xl:flex-row flex-col flex items-center justify-center gap-7 sm:gap-14">
       <div className="xl:w-5/12 w-11/12 xl:my-40 mt-40 flex flex-col gap-6">
-        <h1 className="min-w-[85%] sm:min-w-[300px] xl:min-w-[490px] xl:w-10/12 w-8/12 font-normal text-2xl sm:text-4xl text-black relative z-40">
+        <h1 className="min-w-[73%] sm:min-w-[300px] xl:min-w-[490px] xl:w-10/12 w-8/12 font-normal text-2xl sm:text-4xl text-black relative z-40">
           {title.text}
           {title.mark && (
             <span className="bg-primary whitespace-nowrap inline-block ml-1 absolute px-2 w-[fit-content] bottom-[12px] sm:bottom-[12px] leading-[8px] text-black rounded h-2 sm:h-3">

diff --git a/components/HowWorks.tsx b/components/HowWorks.tsx
@@ -30,7 +30,7 @@ const HowWorks = () => {
                   <Image alt="" src={"/down.svg"} width={12} height={6} />
                 </div>
                 {activeTitle === index && (
-                  <p className="text-base text-activeButton w-[550px] pt-4 mb-2">
+                  <p className="text-base text-activeButton w-full md:w-[550px] pt-4 mb-2">
                     {item.description}
                   </p>
                 )}