Make grid more responsive

floriandejonckheere · Dec 9, 2023 · 612e77f · 612e77f
1 parent 014e818
commit 612e77f
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
diff --git a/src/pages/history.tsx b/src/pages/history.tsx
@@ -7,7 +7,7 @@ export default function History(): ReactElement {
     <>
       <h2 className="text-xl font-bold dark:text-slate-300">History</h2>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 mt-6 gap-16">
+      <div className="grid grid-cols-1 xl:grid-cols-2 mt-6 gap-16">
         <EnergyConsumption />
       </div>
     </>

diff --git a/src/pages/overview.tsx b/src/pages/overview.tsx
@@ -6,7 +6,7 @@ export default function Overview(): ReactElement {
     <>
       <h2 className="text-xl font-bold dark:text-slate-300">Overview</h2>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 mt-8 gap-16 ">
+      <div className="grid grid-cols-1 xl:grid-cols-2 mt-8 gap-16">
         {/* Real-Time summary */}
         <div className="flex flex-col gap-8 bg-white rounded-lg shadow p-7 dark:bg-slate-700 transition-all duration-500">
           <div>

diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
@@ -39,7 +39,7 @@ export default function Settings(): ReactElement {
     <>
       <h2 className="text-xl font-bold dark:text-slate-300">Settings</h2>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 mt-8 gap-16">
+      <div className="grid grid-cols-1 xl:grid-cols-2 mt-8 gap-16">
         <div className="bg-white rounded-xl shadow p-4 sm:p-7 dark:bg-slate-900">
           <div className="mb-8">
             <h2 className="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">

diff --git a/src/pages/suggestions.tsx b/src/pages/suggestions.tsx
@@ -8,7 +8,7 @@ export default function Suggestions(): ReactElement {
     <>
       <h2 className="text-xl font-bold dark:text-slate-300">Suggestions</h2>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 mt-6 gap-16">
+      <div className="grid grid-cols-1 xl:grid-cols-2 mt-6 gap-16">
         <EnergyAlerts />
         <Weather />
       </div>