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
This commit is contained in:
JeffEmmett 2025-06-13 22:37:14 +00:00
parent 11f0e0cac9
commit 8968eb30c2
1 changed files with 2 additions and 2 deletions

View File

@ -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}