Ivan Li
2834b7fe57
- Improve grid layout responsiveness from md:grid-cols-2 to lg:grid-cols-2 - Add responsive LED control items with grid-cols-2 sm:grid-cols-4 - Reduce padding and spacing for better small window display - Optimize button and input sizes with compact styling - Add custom CSS for small screen handling (<640px and <600px) - Implement auto-fit grid layout with minmax(280px, 1fr) - Enhance main container with overflow-x-auto and responsive padding - Reduce overall page spacing and card body padding for compact display
24 lines
483 B
CSS
24 lines
483 B
CSS
@import "tailwindcss";
|
|
@config "../tailwind.config.js";
|
|
|
|
/* Custom responsive styles for small windows */
|
|
@media (max-width: 640px) {
|
|
.container {
|
|
max-width: 100%;
|
|
padding-left: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* Ensure LED control panels are responsive */
|
|
.led-control-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.led-control-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
} |