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:
parent
11f0e0cac9
commit
8968eb30c2
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Reference in New Issue