Fine-tune styling for cross-device consistency

2308-Bread · Apr 30, 2024 · 702ece0 · 702ece0
1 parent 9818a2d
commit 702ece0
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
@@ -4,9 +4,9 @@ import MapComponent from "../Map/Map";
 
 const Main = () => {
   return (
-    <div className="main h-screen w-screen overflow-hidden flex justify-center items-center mt-[-3rem] md:mt-0">
+    <div className="main h-screen w-screen overflow-hidden flex justify-center items-center mt-[-4rem] lg:mt-[-1rem]">
       <div className="map-wrapper flex flex-col h-[75%] w-full items-center">
-        <h2 className="font-fattest text-[#563c2c] hover:animate-wiggle focus:animate-wiggle drop-shadow-2xl text-center p-2 text-3xl md:text-3xl lg:text-4xl pt-0 md:pt-2 lg:pt-3">
+        <h2 className="font-fattest text-[#563c2c] hover:animate-wiggle focus:animate-wiggle drop-shadow-2xl text-center p-2 text-3xl md:text-4xl lg:text-5xl pt-0 md:pt-2 lg:pt-3">
           Let's learn about bread - Select a region to get baking!
         </h2>
         <div className="map-background bg-[#e29c73] shadow-[0_.5rem_1.5rem_rgba(0,0,0,.75)] w-[95%] flex justify-center mt-6 md:mt-6 lg:mt-5 p-3 rounded-3xl lg:w-[60vw] xl:w-[50vw]">