From 4de0ca5bb4ebcecd979ed378204231617cfc932f Mon Sep 17 00:00:00 2001
From: LevaniVashadze <vashadzelevani11@gmail.com>
Date: Mon, 4 Mar 2024 13:11:02 +0400
Subject: [PATCH] overlapping text fixes for mobile devices

---
 src/components/About.jsx   | 5 ++++-
 src/components/Contact.jsx | 2 +-
 src/components/Home.jsx    | 9 +++++++--
 src/components/Work.jsx    | 5 ++++-
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/About.jsx b/src/components/About.jsx
index 8a2e560..e4f6b74 100644
--- a/src/components/About.jsx
+++ b/src/components/About.jsx
@@ -5,7 +5,10 @@ const About = () => {
   const { t } = useTranslation();
   return (
     <Element name={"About"}>
-      <section id="About" className="flex h-screen items-center justify-center">
+      <section
+        id="About"
+        className="flex min-h-screen min-h-svh items-center justify-center"
+      >
         <div className="mb-24 px-2 text-left lg:mb-0 lg:w-1/2 2xl:w-1/3">
           <h2 className="mb-1 text-4xl font-bold">{t("aboutTitle")}</h2>
           <p className="font-raleway text-2xl">{t("aboutText")}</p>
diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx
index ccffab5..4f47a87 100644
--- a/src/components/Contact.jsx
+++ b/src/components/Contact.jsx
@@ -7,7 +7,7 @@ const Contact = () => {
     <Element name={"Contact"}>
       <section
         id="Contact"
-        className="flex h-screen items-center justify-center"
+        className="flex min-h-screen min-h-svh items-center justify-center"
       >
         <div className="px-4 lg:w-1/2 2xl:w-1/3">
           <h3 className="mb-4 text-3xl">{t("ContactText")}</h3>
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
index c408096..740cbed 100644
--- a/src/components/Home.jsx
+++ b/src/components/Home.jsx
@@ -5,9 +5,14 @@ const Home = () => {
   const { t } = useTranslation();
   return (
     <Element name={"Home"}>
-      <section id="Home" className="flex h-screen items-center justify-center">
+      <section
+        id="Home"
+        className="flex min-h-screen min-h-svh items-center justify-center"
+      >
         <div className="text-center">
-          <h1 className="font-sparta text-6xl font-bold">{t("hello")}</h1>
+          <h1 className="font-sparta text-5xl font-bold sm:text-6xl">
+            {t("hello")}
+          </h1>
           <h3 className="text-3xl">{t("welcome")}</h3>
         </div>
 
diff --git a/src/components/Work.jsx b/src/components/Work.jsx
index 760ed29..11e4221 100644
--- a/src/components/Work.jsx
+++ b/src/components/Work.jsx
@@ -4,7 +4,10 @@ import { Trans } from "react-i18next";
 const Work = () => {
   return (
     <Element name={"Work"}>
-      <section id="Work" className="flex h-screen items-center justify-center">
+      <section
+        id="Work"
+        className="flex min-h-screen min-h-svh items-center justify-center"
+      >
         <div className="container mx-auto px-4 lg:w-2/3">
           <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
             <div className="">