Issue: Pages Not Responsive on Mobile/Tablet
Problem
Multiple pages provide a poor experience on small screens. The following issues have been identified:
- Login —
.login-card has padding: 60px (excessive on mobile); only one media query exists
- Register — Platform icons overflow; card padding too large on small screens
- Movie/Series Details — 350px sidebar doesn't collapse properly; recommendations lack mobile padding
- Admin Tables (
users_table.html, gestion_cartelleres.html) — Multi-column tables overflow; filter bars don't stack
- Admin Dashboard — Chart.js canvases have fixed 400px height; date filters don't stack; grid breaks
- Legal Pages — Cards have
padding: 40px and titles 32px, both too large for mobile
- Home Page — Search bar has
margin-left: 20%; filter dropdowns don't stack vertically
- Profile/Settings — Sidebar grid lacks mobile margins; avatar positioning breaks
- Header/Base — Welcome text and language selector compete for space on narrow screens
Steps
- Add responsive breakpoints (480px, 768px) to
static/css/login.css and static/css/register.css
- Add mobile breakpoint to
static/css/details.css for sidebar collapse and font sizes
- Add
overflow-x: auto and stacked filter layout to admin management CSS
- Add responsive canvas height and stacked filter grid to dashboard templates
- Add mobile padding and font size overrides to
privacy_policy.css and terms_use.css
- Fix search bar margin and stack filter dropdowns in
static/css/home/home.css and static/css/home/filter.css
- Fix profile grid spacing and avatar positioning in
base_profile.css and user_settings.css
- Hide
.welcome-text and compact language selector on very small screens in base.css
Relevant Files
static/css/login.css, static/css/register.css
static/css/details.css
static/css/home/home.css, static/css/home/filter.css
static/css/privacy_policy.css, static/css/terms_use.css
static/css/base.css, static/css/global.css
users/static/users/css/base_profile.css, user_settings.css, user_profile.css, admin_management.css
- All affected templates listed above
Issue: Pages Not Responsive on Mobile/Tablet
Problem
Multiple pages provide a poor experience on small screens. The following issues have been identified:
.login-cardhaspadding: 60px(excessive on mobile); only one media query existsusers_table.html,gestion_cartelleres.html) — Multi-column tables overflow; filter bars don't stackpadding: 40pxand titles32px, both too large for mobilemargin-left: 20%; filter dropdowns don't stack verticallySteps
static/css/login.cssandstatic/css/register.cssstatic/css/details.cssfor sidebar collapse and font sizesoverflow-x: autoand stacked filter layout to admin management CSSprivacy_policy.cssandterms_use.cssstatic/css/home/home.cssandstatic/css/home/filter.cssbase_profile.cssanduser_settings.css.welcome-textand compact language selector on very small screens inbase.cssRelevant Files
static/css/login.css,static/css/register.cssstatic/css/details.cssstatic/css/home/home.css,static/css/home/filter.cssstatic/css/privacy_policy.css,static/css/terms_use.cssstatic/css/base.css,static/css/global.cssusers/static/users/css/base_profile.css,user_settings.css,user_profile.css,admin_management.css