fix: alignment of discover headings (#3597)

* alignment of text * aligned the button nd heading * Centered all headings
EddieHubCommunity · Feb 2, 2023 · 55397c9 · 55397c9
1 parent e7b7c3d
commit 55397c9
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/pages/discover.js b/pages/discover.js
@@ -86,7 +86,7 @@ export default function Popular({ data, BASE_URL }) {
         </div>
 
         <div className="mb-12">
-          <div className="flex flex-col md:flex-row gap-3 items-center mb-4">
+          <div className="flex flex-row justify-center md:justify-start gap-3 items-center mb-4">
             <h2 className="text-md md:text-xl font-bold">
               Random LinkFree Profiles
             </h2>
@@ -108,7 +108,7 @@ export default function Popular({ data, BASE_URL }) {
         </div>
 
         <div className="mb-12">
-          <h2 className="text-xl font-bold mb-4">
+          <h2 className="text-md md:text-left md:text-xl text-center font-bold mb-4">
             Trending LinkFree Profiles (last 24 hours)
           </h2>
           <ul className="flex flex-wrap gap-3 justify-center">
@@ -121,7 +121,7 @@ export default function Popular({ data, BASE_URL }) {
         </div>
 
         <div className="mb-12">
-          <h2 className="text-xl font-bold mb-4">Popular LinkFree Profiles</h2>
+          <h2 className="text-md md:text-xl md:text-left text-center font-bold mb-4">Popular LinkFree Profiles</h2>
           <ul className="flex flex-wrap gap-3 justify-center">
             {data.popular.map((profile) => (
               <li key={profile.username}>