/* Responsive styles for AI Tools listing */ @media (max-width: 1024px) { .aitools-container { padding: 0 15px; } .aitools-item { grid-template-columns: 1fr; } .aitools-col-span-3, .aitools-col-span-2, .aitools-col-span-5 { grid-column: span 1; } .aitools-page-content { margin: 15px; padding: 25px; } } @media (max-width: 768px) { body { font-size: 15px; } .aitools-all-categories { flex-wrap: wrap; justify-content: center; } .aitools-category-filter { margin: 5px; padding: 6px 12px; font-size: 13px; width: auto; } .aitools-search-field { width: 100%; margin: 10px auto; max-width: 100%; } .aitools-search-field input[type="text"], .aitools-search input[type="text"] { padding: 8px 12px; font-size: 14px; } .aitools-search-button { padding: 8px 15px; font-size: 14px; } /* Two-column categories layout for mobile */ .aitools-categories-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .aitools-category-item { margin: 0; } .aitools-category-item a { padding: 8px 10px; font-size: 13px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%; box-sizing: border-box; position: relative; z-index: 5; /* Ensure clickable area is above other elements */ } /* Make sure category buttons have proper touch target size */ .aitools-category-item a, .aitools-category-filter { min-height: 44px; display: flex; align-items: center; justify-content: center; } .aitools-tool-description { font-size: 14px; } .aitools-pagination a, .aitools-pagination span, .elementor-pagination a, .elementor-pagination span { padding: 6px 10px; margin: 0 3px; font-size: 14px; } .aitools-video-container { width: 100%; max-width: 250px; margin: 0 auto; } .aitools-video-container iframe { width: 100%; } .aitools-blog-posts { grid-template-columns: 1fr; } /* Fix admin panel sidebar */ .sidebar { width: 200px; } .content { padding: 15px; } } @media (max-width: 600px) { .sidebar { width: 100%; position: relative; min-height: auto; } .container { flex-direction: column; } .content { width: 100%; } .form-row { flex-direction: column; } .top-bar { flex-direction: column; align-items: flex-start; } .top-bar h1 { margin-bottom: 10px; } } @media (max-width: 480px) { .aitools-logo { max-width: 100px; margin: 0 auto 15px; } .aitools-pricing { text-align: center; } .aitools-heading-title { font-size: 24px; } .aitools-tool-title { font-size: 16px; text-align: center; } .aitools-category { font-size: 11px; padding: 2px 6px; } .aitools-counter { width: 28px; height: 28px; font-size: 12px; } /* Fix admin panel forms */ .form-group input[type="text"], .form-group input[type="url"], .form-group input[type="number"], .form-group textarea, .form-group select { font-size: 14px; } .form-buttons { flex-direction: column; gap: 10px; } .btn { width: 100%; text-align: center; } .checkbox-group { grid-template-columns: 1fr; } } /* Add viewport meta tag fix for admin pages */ @viewport { width: device-width; initial-scale: 1; }