787c6ddd4f
🔧 Grid Layout Improvements: - Fixed excessive right padding (pr-96) that was cutting off cards on smaller screens - Made right padding responsive: only applies on lg+ screens where side panels are visible - Improved grid columns: grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 - Added responsive gap spacing: gap-4 sm:gap-6 lg:gap-8 - Made container padding responsive: p-4 sm:p-6 lg:p-8 📱 Mobile-First Responsive Design: - Added 'xs' breakpoint (475px) to Tailwind config for better mobile control - Made header layout stack vertically on mobile with proper spacing - Responsive text sizing throughout (text-2xl sm:text-3xl) - Improved button spacing and layout for mobile devices 🎯 Layout Fixes: - Cards no longer get cut off on mobile/tablet screens - Side panels properly hidden on screens < 1024px via existing CSS - Grid adapts properly to available screen space - Better utilization of screen real estate on all devices ✅ Cross-Device Testing: - Mobile: Single column layout with proper spacing - Tablet: 2-3 columns with adequate gaps - Desktop: 3-4 columns with side panel space reserved - Large screens: 4-5 columns with full side panel functionality The cards page now provides an optimal viewing experience across all device sizes! 📱💻🖥️
16 lines
No EOL
305 B
JavaScript
16 lines
No EOL
305 B
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
screens: {
|
|
'xs': '475px',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|