From 17c1820e8c17f6f60902a5b8e2ffc06c98702537 Mon Sep 17 00:00:00 2001
From: aratidgr8 <aratidgr8@gmail.com>
Date: Thu, 10 Oct 2024 18:40:08 +0530
Subject: [PATCH] Small screen alignment fix for accountCard - PRESS0-2276

---
 src/app/pages/home/accountCard.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/home/accountCard.js b/src/app/pages/home/accountCard.js
index 6b813ede6..ba371e8ad 100644
--- a/src/app/pages/home/accountCard.js
+++ b/src/app/pages/home/accountCard.js
@@ -13,6 +13,7 @@ import {
 	getPlatformBaseUrl,
 	isJarvis,
 } from '../../util/helpers';
+import classNames from 'classnames';
 
 const base = [
 	{
@@ -82,11 +83,19 @@ const AccountCard = ( { props } ) => {
 		<Card { ...props }>
 			<Card.Content>
 				<Title size={ 2 }>Bluehost Account</Title>
-				<ul className="nfd-grid nfd-grid-cols-3 nfd-h-full">
+				<ul
+					className={ classNames(
+						'max-[575px]:nfd-grid-cols-2 nfd-gap-3',
+						'nfd-grid nfd-grid-cols-3 nfd-h-full'
+					) }
+				>
 					{ base.map( ( link ) => (
 						<li
 							key={ link.id }
-							className="nfd-flex nfd-items-center nfd-justify-center"
+							className={ classNames(
+								'max-[575px]:nfd-items-start',
+								'nfd-flex nfd-items-center nfd-justify-center'
+							) }
 						>
 							<a
 								href={ link.href }