fix: container layout for firefox

arc53 · Oct 31, 2023 · 353e24f · 353e24f
1 parent 6940a75
commit 353e24f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
@@ -123,7 +123,7 @@ export default function Hero({ className = '' }: { className?: string }) {
         {/* third */}
         <div className=" rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/80 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-tl-none md:rounded-bl-none ">
           <div
-            className={`rounded-[45px] bg-white p-${
+            className={`firefox rounded-[45px] bg-white p-${
               isMobile ? '3.5' : '6 px-6 '
             } lg:rounded-tl-none lg:rounded-bl-none`}
           >

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -364,3 +364,17 @@ template {
   color: #9ca3af;
   opacity: 1;
 }
+
+/* third container laylout for Firefox */
+@-moz-document url-prefix() {
+  .firefox{
+    padding: 32px;
+  }
+}
+
+/* For screens with a maximum width of 768px (mobile) */
+@media (max-width: 768px) {
+  .firefox {
+    padding: 16px;
+  }
+}