"ഫലകം:Listofdistricts2/styles.css" എന്ന താളിന്റെ പതിപ്പുകൾ തമ്മിലുള്ള വ്യത്യാസം

← മുൻപത്തെ വ്യത്യാസം അടുത്ത വ്യത്യാസം →

@@ വരി 1: / വരി 1: @@
-/* Container */
-.district-container {
-  width: 94%;
-  margin: 15px auto;
-  padding: 20px;
-  background: linear-gradient(135deg, #f0f7ff, #e6ecff);
-  border-radius: 12px;
-  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
-  border: 3px solid #ccc;
-  text-align: center;
-}
-/* Section title (full width) */
-.district-title {
-  font-size: 1.4rem;
-  font-weight: bold;
-  color: #004EC3;
-  margin: 20px 0 10px 0;
-  width: 100%;
-  text-align: center;
-}
 /* Flex container for items */
 .district-items {
    display: flex;
    flex-wrap: wrap;
-   justify-content: center;
+   justify-content: space-between; /* even distribution */
-   gap: 12px;  /* handles spacing, no need for margins */
+   gap: 12px; /* consistent spacing */
    margin-bottom: 20px;
 }
@@ വരി 32: / വരി 10: @@
 /* Each item as clickable card */
 .district-items a {
-   flex: 1 1 auto;
+   flex: 1 1 calc(25% - 12px); /* 4 items per row by default */
-   min-width: 140px;
+   box-sizing: border-box;
-  max-width: 220px;
    background: #ffffff;
    border: 2px solid #0073e6;
@@ വരി 47: / വരി 24: @@
 }
-/* Hover effect – invert colors */
+/* Hover effect */
 .district-items a:hover {
    background: #81bffc;
@@ വരി 57: / വരി 34: @@
 }
-/* Small subtext inside cards */
+/* Responsive: 2 per row on tablets */
-.district-items a small {
-  display: block;
-  font-size: 0.85rem;
-  margin-top: 4px;
-  color: #555;
-}
-/* Responsive */
 @media (max-width: 768px) {
    .district-items a {
-     min-width: 45%;
+     flex: 1 1 calc(45% - 12px);
      font-size: 0.95rem;
    }
 }
+/* Responsive: 1 per row on mobile */
 @media (max-width: 480px) {
    .district-items a {
-     min-width: 100%;
+     flex: 1 1 100%;
      font-size: 0.9rem;
    }
 }