sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve mobile header appearance with background and blur effects

Browse Source 
Add media query for mobile devices to apply sticky header styling with a blurred background and adjusted padding.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 051a65da-1176-4478-a61c-c662f2a15536
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/051a65da-1176-4478-a61c-c662f2a15536/xbALwBu
This commit is contained in:
sebastjanartic 2025-08-30 21:34:36 +00:00
parent e53138f4e9
commit c358344011
1 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/index.css
View File

@ -353,6 +353,18 @@ input[data-testid*="search"]::placeholder {
padding-top: 80px;
}
/* Mobile specific adjustments for header */
@media (max-width: 768px) {
.header-sticky {
background: rgba(30, 20, 40, 0.95) !important;
backdrop-filter: blur(10px);
}
.has-fixed-header {
padding-top: 70px; /* Slightly less padding on mobile */
}
}
/* Test grid overlay */
body.show-grid::after {
content: '';