Merge pull request #1348 from bluehost/fix/solutions-bug-fixes

Small screen alignment fix for accountCard - PRESS0-2276
bluehost · Oct 17, 2024 · d6035e1 · d6035e1
2 parents 25b5e55 + 17c1820
commit d6035e1
Showing 1 changed file with 11 additions and 2 deletions.
diff --git 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 }