better responsive design

src/pages/vote/LegacyVoteCard.tsx

@@ -9,7 +9,7 @@ export const LegacyVoteCard: React.FC<LegacyVoteCardProps> = ({
 }) => {
   return (
     <div
-      className={`flex flex-col justify-between lt-md:min-h-[180px] ${className}`}
+      className={`flex flex-col justify-between lt-lg:min-h-[180px] ${className}`}
     >
       <div className="text-16 text-charcoal dark:text-white mb-18 font-medium">
         Legacy onchain contract
@@ -22,7 +22,7 @@ export const LegacyVoteCard: React.FC<LegacyVoteCardProps> = ({
       <a
         href="https://etherscan.io/address/0x892f481bd6e9d7d26ae365211d9b45175d5d00e4"
         target="_blank"
-        className="flex items-center lt-md:justify-center text-primary dark:text-primary-light font-medium h-[47px]"
+        className="flex items-center lt-lg:justify-center text-primary dark:text-primary-light font-medium h-[47px]"
         rel="noreferrer"
       >
         View Legacy Gov <IconLink className="w-14 ml-6" />

src/pages/vote/StakedCard.tsx

@@ -25,9 +25,9 @@ export const StakeCard: React.FC<StakeCardProps> = ({
   const { handleWalletButtonClick } = useWalletConnect();
   return (
     <div
-      className={`flex flex-col md:flex-row lt-md:min-h-[360px] lt-md:justify-between ${className}`}
+      className={`flex flex-col lg:flex-row lt-lg:min-h-[360px] lt-lg:justify-between ${className}`}
     >
-      <div className="flex flex-col max-w-[500px]">
+      <div className="flex flex-col lg:max-w-[500px]">
         <div className="text-16 text-charcoal dark:text-white mb-18 font-medium">
           Stake {symbol}
         </div>
@@ -36,11 +36,11 @@ export const StakeCard: React.FC<StakeCardProps> = ({
           In order to participate in Bancor governance activities, you should
           stake {symbol} tokens.
         </div>
-        <div className="flex w-full justify-center md:justify-start">
+        <div className="flex w-full justify-center lg:justify-start">
           <Button
             variant={ButtonVariant.Primary}
             size={ButtonSize.Medium}
-            className="mt-20 lt-md:w-full"
+            className="mt-20 lt-lg:w-full"
             onClick={() => {
               if (!account) {
                 handleWalletButtonClick();

src/pages/vote/UnstakedCard.tsx

@@ -41,7 +41,7 @@ export const UnstakeCard: React.FC<UnstakeCardProps> = ({
               : ButtonVariant.Primary
           }
           size={ButtonSize.Medium}
-          className="mt-20 md:mt-0 lt-md:w-full"
+          className="mt-20 lg:mt-0 lt-lg:w-full"
           disabled={
             (!!unstakeTime || !stakeAmount || Number(stakeAmount) === 0) &&
             !isUnlocked

src/pages/vote/Vote.tsx

@@ -93,7 +93,7 @@ export const Vote = () => {
       or BNT (or both) to receive voting powers.`}
     >
       <>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-y-30 gap-x-50">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-y-30 gap-x-50">
           <VoteCardDivided>
             <StakeCard
               account={account}

src/pages/vote/VoteBalances.tsx

@@ -13,7 +13,7 @@ export const VoteBalances: React.FC<VoteBalancesProps> = ({
   stakeAmount,
 }) => {
   return (
-    <div className="flex flex-col md:w-[220px] lt-md:h-[145px] md:ml-20 border border-silver dark:border-grey rounded-10 pl-20 pr-20">
+    <div className="flex flex-col lg:w-[220px] lt-lg:h-[145px] lg:ml-20 border border-silver dark:border-grey rounded-10 pl-20 pr-20">
       <div className="flex flex-col justify-evenly items-center flex-1">
         <div className="text-secondary">Available Balance</div>
         {!account || (govToken && govToken.balance) ? (

src/pages/vote/VoteCard.tsx

@@ -20,18 +20,18 @@ export const VoteCard: React.FC<VoteCardProps> = ({ stakedAny, className }) => {
         infrastructure. Every user can vote on every available proposal and help
         shape the future of the Bancor Protocol.
       </div>
-      <div className="flex flex-col md:flex-row md:items-baseline items-center w-full">
+      <div className="flex flex-col lg:flex-row lg:items-baseline items-center w-full">
         <Button
           variant={stakedAny ? ButtonVariant.Primary : ButtonVariant.Secondary}
           size={ButtonSize.Medium}
-          className="mt-20 lt-md:w-full"
+          className="mt-20 lt-lg:w-full"
           onClick={() => openNewTab('https://vote.bancor.network/')}
         >
           {'Vote on Snapshot'}
         </Button>
         <Navigate
           to="https://support.bancor.network/hc/en-us/articles/5476957904914"
-          className="flex items-center text-primary dark:text-primary-light font-medium md:ml-40 lt-md:mt-20"
+          className="flex items-center text-primary dark:text-primary-light font-medium lg:ml-40 lt-lg:mt-20"
         >
           How to Vote <IconLink className="w-14 ml-6" />
         </Navigate>

src/pages/vote/VoteCardDivided.tsx

@@ -18,20 +18,20 @@ export const VoteCardDivided: React.FC<VoteCardDividedProps> = ({
   // Append TailwindCSS classes to the first child's existing classes
   const firstChildClasses = childrenArray[0].props.className || '';
   const firstChildWithClasses = cloneElement(childrenArray[0], {
-    className: `flex-1 md:h-full lt-md:w-full p-24 ${firstChildClasses}`.trim(),
+    className: `flex-1 lg:h-full lt-lg:w-full p-24 ${firstChildClasses}`.trim(),
   });
 
   // Append TailwindCSS classes to the second child's existing classes
   const secondChildClasses = childrenArray[1].props.className || '';
   const secondChildWithClasses = cloneElement(childrenArray[1], {
     className:
-      `flex-none md:h-full md:w-[350px] lt-md:w-full p-24 ${secondChildClasses}`.trim(),
+      `flex-none lg:h-full lg:w-[350px] lt-lg:w-full p-24 ${secondChildClasses}`.trim(),
   });
 
   return (
     <div
-      className={`content-block flex flex-col md:flex-row md:col-span-2 items-center
-      md:min-h-[170px] md:hover:shadow-lg md:divide-x lt-md:divide-y divide-silver dark:divide-grey`}
+      className={`content-block flex flex-col lg:flex-row lg:col-span-2 items-center
+      lg:min-h-[170px] lg:hover:shadow-lg lg:divide-x lt-lg:divide-y divide-silver dark:divide-grey`}
     >
       {firstChildWithClasses}
       {secondChildWithClasses}

tailwind.config.js

@@ -9,8 +9,8 @@ module.exports = {
     screens: {
       sm: '640px',
       md: '768px',
-      'lt-md': { max: '767px' }, // lt-md for "less than md"
       lg: '1024px',
+      'lt-lg': { max: '1023px' },
       xl: '1280px',
       '2xl': '1536px',
     },