From 724cc3a7fd72697c3dec087b4cc49dd38ec42924 Mon Sep 17 00:00:00 2001
From: mgalihpp <muhammadgalih451@gmail.com>
Date: Fri, 24 Nov 2023 17:19:17 +0700
Subject: [PATCH] fix justify for mobile and dekstop

---
 client/src/pages/Category.jsx    | 2 +-
 client/src/pages/Home/Main.jsx   | 4 ++--
 client/src/pages/SearchMusic.jsx | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/pages/Category.jsx b/client/src/pages/Category.jsx
index f539c86..a99fa8d 100644
--- a/client/src/pages/Category.jsx
+++ b/client/src/pages/Category.jsx
@@ -44,7 +44,7 @@ const Category = () => {
         </div>
       </div>
       <div
-        className={`flex flex-row flex-wrap items-start mx-auto justify-center gap-2 bg-gradient-to-b ${selectedCat?.re} ${selectedCat?.to} h-full sm:gap-4 py-12 px-4
+        className={`flex flex-row flex-wrap items-start mx-auto justify-center sm:justify-start gap-2 bg-gradient-to-b ${selectedCat?.re} ${selectedCat?.to} h-full sm:gap-4 py-12 px-4
         `}
       >
         {compLoad ? (
diff --git a/client/src/pages/Home/Main.jsx b/client/src/pages/Home/Main.jsx
index d524add..8902aea 100644
--- a/client/src/pages/Home/Main.jsx
+++ b/client/src/pages/Home/Main.jsx
@@ -72,7 +72,7 @@ const Main = () => {
         </h1>
       </div>
       <Suspense fallback={<Loading />}>
-        <div className="flex flex-wrap mx-auto flex-row items-center justify-start gap-4">
+        <div className="flex flex-wrap mx-auto flex-row items-center justify-center sm:justify-start gap-4">
           {isPLoading ? (
             Array.from({ length: 3 }, (_, index) => (
               <div key={index}>
@@ -126,7 +126,7 @@ const Main = () => {
 
       <Suspense fallback={<Loading />}>
         <div
-          className={`flex flex-row flex-wrap items-start justify-center gap-4 mt-4
+          className={`flex flex-row flex-wrap start items-start justify-center sm:justify-start gap-4 mt-4
         `}
         >
           {isLoading ? (
diff --git a/client/src/pages/SearchMusic.jsx b/client/src/pages/SearchMusic.jsx
index 046c6c3..592e221 100644
--- a/client/src/pages/SearchMusic.jsx
+++ b/client/src/pages/SearchMusic.jsx
@@ -148,7 +148,7 @@ const SearchMusic = () => {
           </h1>
         </div>
         <div
-          className={`flex items-center flex-row flex-wrap gap-4 mt-4
+          className={`flex items-center flex-row flex-wrap justify-center sm:justify-start gap-4 mt-4
         `}
         >
           {renderMusicCards()}