Fix mobile banner margin

WiseBlend · Feb 7, 2024 · c338778 · c338778
1 parent d1ef778
commit c338778
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/src/app/components/hero.tsx b/src/app/components/hero.tsx
@@ -6,13 +6,19 @@ const heading = Playfair_Display({ subsets: ["latin"] });
 export default function Hero() {
   return (
     <div className="hero relative mt-6 lg:mt-12">
-      <h1 className={`text-6xl text-center lg:text-left font-semibold ${heading.className}`}>
+      <h1
+        className={`text-6xl text-center lg:text-left font-semibold ${heading.className}`}
+      >
         Blend Smart
         <br />
         Spend Wise
       </h1>
-      <div className="my-8 text-xl text-center lg:text-left">Never overspend on skincare again!</div>
-      <div className={`banner text-white font-semibold p-6 lg:w-3/5 rounded-l-3xl ${font.className}`}>
+      <div className="my-8 text-xl text-center lg:text-left">
+        Never overspend on skincare again!
+      </div>
+      <div
+        className={`banner text-white font-semibold p-6 lg:w-3/5 rounded-l-3xl ml-4 lg:ml-0 ${font.className}`}
+      >
         Use AI to find cheaper alternatives with
         <br />
         the same function!