From 8968eb30c278cce35a288a7dff2ab10a8cd4aed7 Mon Sep 17 00:00:00 2001
From: JeffEmmett <20747463-JeffEmmett@users.noreply.replit.com>
Date: Fri, 13 Jun 2025 22:37:14 +0000
Subject: [PATCH] Adjust the class display to better utilize screen space on
 all devices

Modify grid layout in ClassesSection component to display classes in a 2x2 or 1x4 grid.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9139fa4a-deb6-40f3-971b-e98fd6d687ed
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/af8dabca-e746-4e53-9c29-d8d4d9cf30f5/27961860-e88b-41ac-a047-d0e5f710e101.jpg
---
 client/src/components/classes/classes-section.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/classes/classes-section.tsx b/client/src/components/classes/classes-section.tsx
index 790479b..fe8bd08 100644
--- a/client/src/components/classes/classes-section.tsx
+++ b/client/src/components/classes/classes-section.tsx
@@ -25,7 +25,7 @@ export function ClassesSection() {
         {/* Class description boxes removed */}
         
         {isLoading ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
             {[1, 2, 3].map((_, i) => (
               <div key={i} className="bg-white rounded-lg overflow-hidden shadow-lg">
                 <Skeleton className="w-full h-48" />
@@ -46,7 +46,7 @@ export function ClassesSection() {
             <p>Error loading classes. Please try again later.</p>
           </div>
         ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
             {classes?.map((classData) => (
               <ClassCard 
                 key={classData.id}