fixed random mobile line break

StampyAI · Jan 7, 2025 · 2714cd2 · 2714cd2
1 parent 2dfb636
commit 2714cd2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/app/components/HowCanIHelp/howcanihelp.css b/app/components/HowCanIHelp/howcanihelp.css
@@ -7,3 +7,15 @@
 .link-card .image + div {
   max-width: calc(100% - 105px);
 }
+
+/* Show line break on desktop */
+.title-break {
+  display: inline;
+}
+
+/* Hide line break on mobile */
+@media (max-width: 1136px) {
+  .title-break {
+    display: none;
+  }
+}
diff --git a/app/routes/how-can-i-help._index.tsx b/app/routes/how-can-i-help._index.tsx
@@ -13,7 +13,7 @@ export default function HowCanIHelp() {
       <div className="page-body padding-top-56">
         <div className="flexbox padding-bottom-80">
           <h1 className="teal-500 col-7">
-            How can I help with<br></br> AI safety?
+            How can I help with <br className="title-break"></br>AI safety?
           </h1>
           <p className="large col-5 desktop-only">
             The AI safety movement is still relatively new, and your actions could have significant