overlapping-text-issue-resolved

src/components/PrimaryFeatures.jsx

@@ -59,15 +59,15 @@ export function PrimaryFeatures() {
     <section
       id="features"
       aria-label="Features for running your books"
-      className="relative overflow-hidden pb-28 pt-20 sm:py-32"
+      className="relative overflow-hidden pb-28 pt-20 sm:py-32 overflow-avoid"
     >
       <BlurBG />
       <Container className="relative">
         <div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
           <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
             Elevate your web development experience with the comprehensive toolset!
           </h2>
-          <p className="mt-6 text-lg tracking-tight text-emerald-100">
+          <p className="mt-6 text-lg tracking-tight text-emerald-100 text-overflow-avoid">
             Everything you need to create pixel-perfect, responsive websites with ease.
           </p>
         </div>
@@ -218,4 +218,4 @@ const FeatureMedia = memo(function FeatureMedia({ feature }) {
         ))}
     </div>
   );
-});
+});

src/styles/tailwind.css

@@ -28,4 +28,27 @@
 /* Gap between columns */
 .column-gap-6 {
   column-gap: 1.5rem;  
+}
+
+@media (max-width: 370px) {
+  .overflow-avoid {
+    padding-top: 20px;
+  }
+}
+
+@media (max-width: 340px) {
+  .overflow-avoid {
+    padding-top: 10px;
+  }
+}
+
+@media (max-width: 325px) {
+  .overflow-avoid {
+    padding-top: 5px;
+  }
+
+  .text-overflow-avoid {
+    font-size: 1rem;
+    margin-top: 0.25rem;
+  }
 }