wraps text on mobile screens

Vizzuality · Oct 24, 2024 · 9875738 · 9875738
1 parent cb70aaa
commit 9875738
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/src/containers/about/description/index.tsx b/src/containers/about/description/index.tsx
@@ -24,7 +24,7 @@ export default function AboutDescription() {
             Doing more
             <span className="font-thin">4</span>nature
           </span>
-          <span className="text-nowrap"> with citizen science</span>
+          <span className="md:text-nowrap"> with citizen science</span>
         </h2>
       </div>
       <div className="space-y-4 lg:grid lg:grid-cols-12 lg:space-y-0">
@@ -39,7 +39,8 @@ export default function AboutDescription() {
           <Separator className="my-4 bg-grey-800/20" />
           <p>
             more4nature is structured into work packages that reflect the&nbsp;
-            <span className="text-nowrap font-bold">socio-technical approach</span> of the project.
+            <span className="font-bold md:text-nowrap">socio-technical approach</span> of the
+            project.
           </p>
           <Dialog>
             <DialogTrigger asChild>

diff --git a/src/containers/home/intro/index.tsx b/src/containers/home/intro/index.tsx
@@ -33,7 +33,7 @@ export default function Intro() {
         </Media>
 
         <div className="flex flex-1 flex-col items-start justify-center space-y-9 md:grid md:grid-cols-12 md:items-center md:justify-between">
-          <div className="col-span-8 space-y-9 text-white">
+          <div className="space-y-9 text-white md:col-span-8">
             <h1 className="text-xl text-white md:text-3xl">
               Welcome to more
               <span className="font-thin">4</span>
@@ -42,7 +42,7 @@ export default function Intro() {
             <p className="text-lg">
               Reversing the trend in environmental degradation through{' '}
               <span className="font-bold">collaboration</span> of{' '}
-              <span className="text-nowrap font-bold">
+              <span className="font-bold md:text-nowrap">
                 Citizen Science initiatives with authorities.
               </span>
             </p>