fixed the breakpoint issue on tablets by changing the donate button

singodiyashubham87 · May 16, 2024 · 0040f1a · 0040f1a
1 parent 69d1e86
commit 0040f1a
Showing 1 changed file with 8 additions and 7 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -73,13 +73,7 @@ function App() {
       <Joyride steps={steps} continuous showSkipButton={true} />
 
       <div className="bg-[#d3d5d8] flex flex-col min-w-full justify-center gsm:flex-row">
-         {/* Buy me a coffee element */}
-         <a href={BUY_ME_COFFEE_LINK} target="_blank" rel="noopener noreferrer" className="sm:absolute flex items-center right-10 top-4 relative ml-[90%] sm:ml-0">
-            <button className="flex items-center bg-transparent border border-black text-black focus:outline-none bg-[#d4d5d7] hover:bg-[#c6c9ce] rounded-xl p-2">
-              <SiBuymeacoffee className="text-xl mx-auto sm:mr-2" /> {/* Icon */}
-              <span className="hidden sm:block text-base font-cursive">Buy me a Coffee</span> {/* Text */}
-            </button>
-          </a>
+
         {showMenuAndBgColor && (
           <div className="color-pallet gsm:w-[10%] w-[85%] py-7 grid grid-cols-6 vsm:grid-cols-4 gsm:grid-cols-1 gap-2 vsm:gap-4 gsm:gap-2 gsm:py-[5rem] gsm:mb-8 mx-auto">
           <input
@@ -103,6 +97,13 @@ function App() {
         )}
 
         <div className="container w-[90%] gsm:min-h-[100dvh] flex flex-col justify-center items-center gap-[2rem] font-primary m-auto gsm:m-0">
+          {/* Buy me a coffee element */}
+         <a href={BUY_ME_COFFEE_LINK} target="_blank" rel="noopener noreferrer" className="flex justify-end mt-4 w-[90%] sm:ml-0">
+            <button className="flex items-center bg-transparent border border-black text-black focus:outline-none bg-[#d4d5d7] hover:bg-[#c6c9ce] rounded-xl p-2">
+              <SiBuymeacoffee className="text-xl mx-auto sm:mr-2" /> {/* Icon */}
+              <span className="hidden sm:block text-base font-cursive">Buy me a Coffee</span> {/* Text */}
+            </button>
+          </a>
           <div className="flex items-center gap-14">
             {showMenuAndBgColor && (
               <Menu