overlapping text fixes for mobile devices

LevaniVashadze · Mar 4, 2024 · 4de0ca5 · 4de0ca5
1 parent 521c6e8
commit 4de0ca5
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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="">