chore(SLB-306): fix wrapped element alignment

AmazeeLabs · Jun 6, 2024 · 2775021 · 2775021
1 parent c1797ee
commit 2775021
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockInfoGrid.tsx b/packages/ui/src/components/Organisms/PageContent/BlockInfoGrid.tsx
@@ -11,13 +11,13 @@ export function BlockInfoGrid(props: BlockInfoGridFragment) {
       <div className="container-content">
         <div
           className={
-            'flex flex-col md:grid md:grid-cols-2 lg:grid-cols-3 flex-wrap justify-center gap-12 items-center md:items-start'
+            'flex flex-col md:flex-row flex-wrap justify-center gap-12 items-center md:items-start'
           }
         >
           {props.gridItems.map((item, index) => (
             <div
               key={index}
-              className="flex flex-col items-center justify-start gap-4 px-3 md:px-4 text-center"
+              className="flex flex-col items-center justify-start gap-4 px-3 md:px-4 text-center md:w-[calc((100%-3rem)/2)] lg:w-[calc((100%-6rem)/3)]"
             >
               {item?.icon && iconMap[item?.icon]}
               <div className="flex flex-col items-center justify-center gap-3">